调用动画animation-name属性怎么用？animation-name属性详解

互联网 18-11-20

本篇文章给大家带来的内容是关于调用动画animation-name属性怎么用？animation-name属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

animation-name属性:

在CSS3中，使用@keyframes规则定义的动画并不会自动执行，我们还需要使用animation-name属性来调用动画，之后动画才会生效。

语法：

animation-name：动画名；

说明：

注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。为了浏览器兼容性，针对Chrome和Safari浏览器需要加上-webkit-前缀，而针对Firefox浏览器需要加上-moz-。

<!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>

效果如下：

分析：

这里我使用@keyframes规则定义了2个动画：mycolor和mytransform。但是我们只使用animation-name调用动画名为mytransform的动画。因此，名为mytransform的动画就会生效，而名为mycolor的动画不会生效。

在mytransform动画中，0%到50%的之间div元素border-radius属性值实现从0变成50px，然后在50%到100%之间保持border-radius属性值不变并且水平向右移动50px。

方式（1）：

@-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px;-webkit-transform:translateX（0）；} 100%{-webkit-transform:translateX（50px）；} }

方式（2）：

@-webkit-keyframes mytransform { 0%{border-radius:0;} 50%{border-radius:50px;} 100%{-webkit-transform:translateX（50px）；} }

初学者往往都会有疑问，每次我们都是定义：hover伪类定义鼠标移动到元素上时，动画才开始，假如我们想要打开网页的第一时间动画就能自动执行，那该怎么办呢？

其实很简单，我们去除鼠标指针停留在div元素上时的样式，并把样式中的代码改写为div元素本身的样式，成为如下所示的代码，则动画将在页面打开时就立刻进行播放。

div {     width:100px;     height:100px;     background-color:red;     -webkit-animation-name:mytransform;     -webkit-animation-duration:5s;     -webkit-animation-timing-function:linear; }

以上就是对调用动画animation-name属性怎么用？animation-name属性详解的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

以上就是调用动画animation-name属性怎么用？animation-name属性详解的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： animation-name属性