调用动画animation-name属性怎么用？css animation用法大全

在css样式中，我们可以使用动画之前，都是必须使用@keyframes去定义动画，但是利用keyframes定义的动画不太会执行，我们好需要animation-name属性来实现动画的效果，那么在css样式中，我们怎样去使用animation-name属性进行实现呢，下面我们来总结一下调用动画animation-name属性怎么用？css animation用法大全。

在实现动画效果之前，我们要先了解一下animation-name属性：

animation-name属性语法：animation-name：动画名;

说明：在使用animation-name属性定义对话的时候，我们一定要使用keyframes命名的名称一致，前提要区分大小写，如果出现不一致的话，可能就不会有任何的效果，为了其他浏览器的兼容性，我们可以在前面加一个webkit前缀。

代码如下：

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

在以上代码中，我们使用了keyframes去定义了两个动画，但是只要我们使用animation-name调用mytransform，mytransform动画才会去生效，而mycolor就不会去生效，在mytransform动画中，在div中，我们把border-radius属性值实现从0变成50px，然后再由50%变成100%，并且保持属性不变，水平向右移动50px。

很多学员都会有这样的疑问，我们都是使用hover伪类去实现鼠标移动到该元素的时候，动画才会开始，那么当我们打开网页第一时间就想出现动画效果，该怎么执行呢？

其实也是很简单的，我们在div中找到鼠标指针停留在div中的样式，并且去掉，把样式改成div元素本身样式，就会出现页面打开就不会立即播放。

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

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