CSS3的动画属性如何使用
程序员文章站
2022-03-30 15:24:20
...
给大家收集一下 @keyframes 规则和所有动画属性,我们都知道@keyframes 是规定动画的意思,下面做一个实战案例,帮助大家理解,一起来看一下。
属性 描述 CSS
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
下面两个例子设置所有动画属性:
OperaSafariChromeFirefoxInternet Explorer
实例
运行myfirst动画,设置所有的属性:
div
{ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Safari and Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; }
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是CSS3的动画属性如何使用的详细内容,更多请关注其它相关文章!
上一篇: js中数组排序的详解
下一篇: php分页函数示例代码分享_php实例