css3动画
2021-06-11 14:03
标签：data duration orm func 完成 bsp 创建 产生 www 当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： 注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 属性 描述 例如： 简写形式： css3动画 标签：data duration orm func 完成 bsp 创建 产生 www 原文地址：http://www.cnblogs.com/qwert1/p/7291397.htmlCSS3 动画
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes
规定动画。
3
animation
所有动画属性的简写属性，除了 animation-play-state 属性。
3
animation-name
规定 @keyframes 动画的名称。
3
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3
animation-timing-function
规定动画的速度曲线。默认是 "ease"。
3
animation-delay
规定动画何时开始。默认是 0。
3
animation-iteration-count
规定动画被播放的次数。默认是 1。
3
animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal"。
3
animation-play-state
规定动画是否正在运行或暂停。默认是 "running"。
3
animation-fill-mode
规定对象动画时间之外的状态。
3
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;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 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;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
上一篇：js操作cookie的一些注意项
下一篇：jQuery 属性操作