css动画用什么规则呢？
导读： CSS3动画是什么？ 动画是使元素从一种样式逐渐变化为另一种样式的效果。使用@keyframes规则，你可以创建动画。 当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个C...
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。使用@keyframes规则，你可以创建动画。
当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
●规定动画的名称
●规定动画的时长
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在-webkit-,-ms-或-moz-前的数字为支持该前缀属性的第一个浏览器版本号。
1.png
@keyframes规则
语法
@keyframesanimationname{
keyframes-selector{
css-styles;
}
}
属性值：
●animationname必需的。定义animation的名称。
●keyframes-selector必需的。动画持续时间的百分比。
合法值：
●0-100%
●from(和0%相同)
●to(和100%相同)
●css-styles必需的。一个或多个合法的CSS样式属性
说明：
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
css动画示例
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove5sinfinite;
-webkit-animation:mymove5sinfinite;
/*SafariandChrome*/
}
@keyframesmymove
{
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;
}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
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;
}
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css动画用什么规则呢？
本文地址： https://pptw.com/jishu/668325.html