css的animation属性是css3新增的一个动画属性,这个属性比较简单实用,甚至可以替代一些要js才能做的动画。
语法:
值 | 说明 |
---|---|
animation-name | 绑定 frames的名字 |
animation-duration | 动画需要在多少秒完成 |
animation-delay | 动画延迟多少秒触发 |
animation-timeing-function | 动画运动的方式,运动曲线和流程 |
animation-iteration-count | 制定动画运动的次数,如果为infinite则是无限次重复播放 |
animation-direction | 是否轮流反向播放动画 |
animation-play-state | 控制元素动画的播放状态 running 和paused running是默认值 |
常用简写:
//参数 要绑定的运动名称 | 运动持续时间 | 运动曲线| 延迟时间| 重复次数|动画轮流反向执行
animation:run 3s linear 0.5s infinite alertnate
div{
width:300px;
height:260px;
background:#F2F2F2;
animation: run 3s;
}
@keyframes run{
from{
width:300px
height:260px
background:#F2F2F2;
rotate:(0deg)
}
to{
width:600px;
height:550px
background:#67686D;
rotate:(360deg)
}
}
//这段代码会让div从宽300px,高260px,背景颜色#F2F2F2f, 3秒逐渐变化至w:600px,h:550px,bg:#67686D,顺便旋转个360度
@keyframes run{
0%{
width:300px
height:260px
background:#F2F2F2;
}
50%{
width:400px;
height:350px
background:#67686D;
}
100%{
width:500px;
height:450px
background:#67686D;
}
}
//当然了也可用百分百,这个东西甚至可以用来做轮播图。
div:honver{
animation-play-state:paused;
}
最后介绍一下animation插件,这是一个css插件里面封装了各种animation的css3
动画下面是他的下载地址。
大概用法就是先引入一下那个animation
然后在元素的行内样式里要加 animation 和动画的名字
还有几个可选属性用的最多的就是
animation-delay和animation-duration
animation-delay是延迟多久播放的意思,数值单位是 s ://animation-delay:3s
animation-duration是动画持续多久的意思,数值也是s://animation-duration:0.5s
这是一个swiper的中文站里面有详细的中文API翻译,当然了也可以去百度找英文版的swiper官网
swiper下载地址