大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下css中的animation-name属性怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联是一家集网站建设,赤峰企业网站建设,赤峰品牌网站建设,网站定制,赤峰网站建设报价,网络营销,网络优化,赤峰网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
css3animation-name属性
作用:animation-name属性为@keyframes动画规定名称。
语法:
animation-name:keyframename|none;
keyframename:规定需要绑定到选择器的keyframe的名称。
none:规定无动画效果(可用于覆盖来自级联的动画)。
注:需始终设置animation-duration属性,否则当时长为0时,就不会播放动画了。
css3animation-name属性的使用示例
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/*SafariandChrome*/
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframesmymove
{
from{left:0px;}
to{left:200px;}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
from{left:0px;}
to{left:200px;}
}
注释:InternetExplorer9以及更早的版本不支持animation-name属性。
注释:始终规定animation-duration属性,否则时长为0,就不会播放动画了。
看完了这篇文章,相信你对“css中的animation-name属性怎么用”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!