当前位置:Gxlcms > 前端框架 > 调用动画animation-name属性怎么用?css animation用法大全

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

时间:2021-07-01 10:21:17 帮助过:69人阅读

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

u=1139803572,4255442665&fm=26&gp=0.jpg

在实现动画效果之前,我们要先了解一下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用法大全的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行