CSS3animation动画 + 动画如何切换

本文详细介绍了CSS3的animation属性,通过关键帧控制复杂动画。内容包括animation-name、duration、timing-function、delay等属性的用法。此外,还分享了一个实际案例,即通过JavaScript控制元素的旋转动画,实现点击切换动画状态的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前做转盘的时候,用的就是animation,然后加@keyframes。当时时间挺紧张的,就在网上搜了下怎么用,就直接用了。现在有时间了,好好看了一下具体的用法。

—《图解CSS3》
        CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,实现复杂的动画效果。

属性:

animation-name:指定@keyframes关键帧的名字
animation-duration:设置动画播放所需时间,一般以秒为单位
animation-timing-function:设置动画的播放方式
ease|linear|ease-in|ease-out|ease-in-out
animation-delay:动画开始播放的时间,即开始动画前等待的时间
ainimation-iteration-count:动画播放次数,默认为1,如果取值为infinite,则无限循环
animation-direction:动画播放方向 animation-play-state:控制播放状态,running|paused
animation-fill-mode:动画开始前和结束后发生的操作。none|forwards(应用最后关键帧的样式)|backwards(初始帧)|both

今天用到了一个效果,就是页面上要有一个转动的元素,单击这个元素元素停止转动,再次单击,元素重新旋转。

我之前写的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>动画切换</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <div id="top">
        </div>
    </div>
    <script type="text/javascript">

        //获取相关CSS属性
        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];   
        };

        var musicIcon = document.getElementById("top"); //获取到元素 
        musicIcon.addEventListener("click",function(){//为元素添加事件
            var rotate = getCss(musicIcon,"animation");//获取到CSS中animation属性
            if (rotate) { //如果有值设置为空,否则赋值
                musicIcon.style.animation = " ";
            }else{
                musicIcon.style.animation = "200s one infinite linear";
            }       
            ,false);
    </script>

</body>
</html>

CSS代码:

#top{
    width: 86px;
    height: 86px;
    border-radius: 43px;
    border: 1px solid red;
    background: url(../images/icon.png) no-repeat;
    animation: 200s one infinite linear;
}
@keyframes one {
    100% {transform: rotate(36000deg);}
}

但是这样写不管用,原因 “”空字符串可能是不识别。更好的方法是,重新设置一个样式,让它转就给它加上这个样式,否则就去掉这个样式

js代码如下:

    <script type="text/javascript">

        //获取相关CSS属性
        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];   
        };

        var musicIcon = document.getElementById("top");     
        musicIcon.addEventListener("click",function(){
            if (musicIcon.className.indexOf("rotate") >= 0) {
                musicIcon.className = "";
            }
            else {
                musicIcon.className = "rotate";
            }// 更好的方法,重新设置一个样式,让它转就给它加上这个样式,否则就去掉这个样式       
        },false);
    </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值