CSSanimation
程序员文章站
2024-03-24 21:04:34
...
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;
}
上一篇: 移动端判断手势左右滑理解
下一篇: 纯js 判断手势滑动方向
推荐阅读