入门css3动画
入门css3动画
为了让页面体验更为流畅,我们在更多的时候都会采用一些动画给页面流程增加一些耦合性
css3动画分为两类
1. 过渡动画transition
(从一个状态变为另一个状态)
eg:一个div宽高都为100px,鼠标移上后变为宽高各300px ``` div { width: 100px; height: 100px; } div:hover { width: 300px; height: 300px; } ``` 这时候我们就可以用到过渡动画 ``` div { width: 100px; height: 100px; transition: width 3s, height 3s; } ```
2. 关键帧动画keyframes
(一个动画定义多个关键帧,实现更为复杂的动画)
定义一个关键帧动画
// 关键帧的书写很灵活,一行可以写多个关键帧 @keyframes 动画名 { 0% {...} ... /** 时间点 元素状态 **/ ... 100% {...} }
将关键帧动画绑到元素上,需要使用animation
属性
相关推荐
lanzhusiyu 2020-06-21
vavid 2020-04-20
AlisaClass 2020-04-11
云端漂移 2020-03-08
dazhifu 2020-03-03
lanzhusiyu 2020-03-01
aSuncat 2020-03-01
lanzhusiyu 2020-03-01
福叔 2020-02-23
haozitwwwcssscn 2013-05-16
CaiKanXP 2020-01-12
lanzhusiyu 2020-01-05
sorryericsson 2014-01-16
coulder 2020-03-07
冰蝶 2020-03-01