本文摘自PHP中文网,作者云罗郡主,侵删。
本篇文章给大家带来的内容是关于调用动画animation-name属性怎么用?animation-name属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。animation-name属性:
在CSS3中,使用@keyframes规则定义的动画并不会自动执行,我们还需要使用animation-name属性来调用动画,之后动画才会生效。
语法:
animation-name:动画名;
说明:
注意,animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。为了浏览器兼容性,针对Chrome和Safari浏览器需要加上-webkit-前缀,而针对Firefox浏览器需要加上-moz-。
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html>
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< title >CSS3 animation-name属性</ title >
< style type = "text/css" >
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px; -webkit-transform:translateX(0);}
100%{border-radius:50px; -webkit-transform:translateX(50px);}
}
div
{
width:100px;
height:100px;
background-color:red;
}
div:hover
{
-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</ style >
</ head >
< body >
< div ></ div >
</ body >
</ html >
|
效果如下:
阅读剩余部分
相关阅读 >>
调用动画animation-name属性怎么用?animation-name属性详解
更多相关阅读请进入《调用动画》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 调用动画animation-name属性怎么用?animation-name属性详解