@keyframes创建动画的好处？
@关键帧语法规则
在动画制作过程中，您可以多次更改css样式。当发生指定的更改时，使用%,或者使用关键字from和to，这与0%到100%相同。0%是开始动画，100%是动画结束时。为了获得最佳的浏览器支持，应该始终将其定义为0%和100。%的选择器。
it这只是一个动画，可以理解为由多个变换组成的组。
语法:
动画名称{
from{css1}
至{css2}
}
动画名称{
0%{css1}
50%{css2}
100%{css3}
}
注意:animation属性用于控制动画的外观，选择器也用于绑定动画。
二、动画属性值
当调用这个动画时，动画由六个属性组成:
animation-name指定绑定到选择器的关键帧的名称。
动画-持续时间动画指定需要多少秒或毫秒来完成。
动画计时功能设置动画如何完成一个循环。
动画延迟设置动画开始前的延迟间隔。
动画迭代计数定义动画播放的次数。
animation-direction指定动画是否应该反过来播放。
动画:当动画名称的时间-速度曲线开始时，延迟播放次数依次反转。
例如:
让正方形从左上角到右上角，再到右下角，到左下角，最后到左上角，颜色会相应变化。
使用@keyframes在css3中创建动画，并举例说明代码块。
div{animation:我的移动5s无限；
-webkit-animation:我的移动5s无限；/*野生动物园和铬*/
}
myactions
{
0%{top:0px；left:0px;background:red;}
25%{top:0px；left:100px;background:blue;}
50%{top:100px；left:100px;background:yellow;}
75%{top:100px；left:0px;background:green;}
100%{top:0px；left:0px；background:red;}
}
mymove/*safari和铬*/
{
0%{top:0px；left:0px；background:red;}
25%{top:0px；left:100px;background:blue;}
50%{top:100px；left:100px;background:yellow;}
75%{top:100px；left:0px；background:green;}
100%{top:0px；left:0px；background:red;}
}
css3如何实现鼠标移上变长特效？
例子
department{
width:100pixels
}
div:hover{
width:200pixels
}
可以加动画效果，体验更好！
原文标题：css3如何制作动画 @keyframes创建动画的好处？，如若转载，请注明出处：https://www.wmyjt.com/tag/9121.html
免责声明：此资讯系转载自合作媒体或互联网其它网站，「共道号」登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，文章内容仅供参考。
微信扫一扫
相关推荐
-
到手分析乔丹运动板鞋质量曝光？想入手需要注意什么
到手分析乔丹运动板鞋质量曝光？想入手需要注意什么？有人评价说这款乔丹运动板鞋自己的小白鞋正好要换了，看到这个做活动，价格很便宜，外形外观看着很喜欢，穿上也很舒服...
-
入手比较炊大皇煎锅质看真实？用了二周感受告知
入手比较炊大皇煎锅质看真实？用了二周感受告知？有人评价说这款炊大皇煎锅京东物流一级棒，昨天晚上下单，今早就收到货了，打开箱子取出货，眼前一亮，太爱了，这锅太漂亮...
-
实情点评Hero电动磨豆机质量曝光？入手半个月真相分享
实情点评Hero电动磨豆机质量曝光？入手半个月真相分享？有人评价说这款Hero电动磨豆机做工品质：包装精致送礼很好看，也有人评论说它第一次在京东上购买咖啡器具价...
-
未来选择评测渔之源（Yuzhiyuan）钓椅评测感觉真的好吗，图文评测曝光
未来选择评测渔之源（Yuzhiyuan）钓椅评测感觉真的好吗，图文评测曝光？有人评价说这款渔之源（Yuzhiyuan）钓椅除了重一点绝对物超所值，裸椅比参数标的...
-
上避孕环要多少钱(上避孕环多少钱)
上避孕环要多少钱？本篇文章给大家谈谈上避孕环要多少钱，以及节育针女性一针多少钱、上避孕环要多少钱？上环后的不良反应？未婚女性可以上避孕环吗？、妇幼保健院上环的价...
-
喜宴酒席(喜宴酒席布置图)
四川同事第一次吃广东喜酒，随礼500元，看到菜上齐后，一大桌菜也没吃几口，她：亏大了！感觉最近还真的是喜事连连，话说中午才在大姑家吃了农村的喜酒，今天晚上同事又...