搞定css3的动画(一)

追风舟

已于 2022-06-23 14:15:37 修改

阅读量613

点赞数 3

分类专栏： Html5 文章标签：动画 css3 css

于 2016-12-21 14:56:59 首次发布

本文链接：https://blog.youkuaiyun.com/whuizhou/article/details/53784847

版权

Html5 专栏收录该内容

10 篇文章

订阅专栏

在html5中，改变是相当大的，尤其是动画了。咱这里只说动画，不说其他元素。
只谈风月，不谈政治。只为帮组学习css动画。
对前端开发来说，CSS动画最令人激动的事情之一是，我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS，您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够，这是一个非常大的加分！无论你只是添加一点点引人注目的设计细节，还是添加非常多的动画，都没有问题。

CSS的transitions属性。我们重点讲CSS动画规范。

本文会给你足够的CSS动画入门的内容，足以让你变得更有创造力！

1. @keyframes 定义执行动画


// 这里是写动画定义，这里的[driver]就是动画名称
@keyframes drive {
 //do somthing...
}

在这里就是动画的执行代码，俗话说就是动画开始到动画结束、还有就是动画执行过程中的情况了。
看到这里，此时此刻你是否有点想法来代替这种情况。没错就是From和To也可表示动画开始到动画结束。


@keyframes drive {
    from { transform: translateX(0);}
    to { transform: translateX(400px);}
}

在大多时候这种情况是不能满足我们的需求的，最合适就是用百分比来使用，0%和100%这样的使用更合适。
于是乎


@keyframes drive {
    0% {transform: translateX(0);}
    100% {transform: translateX(400px);}
}

如果你乐意还可以多写几个在过程中的比例地址。就看你需求了。这有很大的灵活性可以给关键帧分组，以便以后再查看。

2. 给HTML元素赋值动画animation-name

第一个属性是animation-name，给关键帧动画说明的动画名称


animation-name: GuDian;

第二个属性是animation-duration，给关键帧动画设置动画执行时间


animation-duration: 1s;

第三个属性是animation-timing-function，给关键帧动画设置动画展现形式，默认为：ease

1. ease-in
2. ease-out
3. ease-in-out
animation-timing-function: linear;

第三个属性是animation-iteration-count，给关键帧动画设置重复次数：默认为：1
infinite:定义为一直执行


animation-iteration-count: 1;

第三个属性是animation-fill-mode，给关键帧动画设置最后停留位置,默认为:none

forwards
backwards
```
animation-fill-mode: both;
```
3. 创建X轴平移动画
NOTICE:我们在给html元素赋值给的name要记住他的名字，然后开始用@-webkit-keyframes写动画动容
```
@-webkit-keyframes TransDVD {
 0%{transform: translateX(0);}
 50%{transform: translateX(20px); }
 100%{transform: translateX(300px);}
 }
```
这里我们设置了他的X轴移动的位置，起始点，中点，和终点分别到的位置点。这里的动画名字是TransDVD。
4. 创建缩放动画
```
@-webkit-keyframes TransDVD {
 0%{transform: scale(0);}
 100%{transform: scale(1);}
 }
```

5. 创建旋转动画


@-webkit-keyframes TransDVD {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
    }

5. 创建组合动画-边旋转和边缩放


@-webkit-keyframes TransDVD{
    0%{transform: rotate(0deg) scale(0.1);}
    100%{transform: rotate(360deg) scale(1);}
    }

NOTICE:申明动画我们可以用一个简单的方式

animation: TransDVD 1s ease-out 0s infinite backwards;
参数说明 `动画名称` `执行时间` `执行方式` `动画延迟时间` `动画重复次数` `最后停留位置`

我的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css动画</title>
    <style>
    .car {
        background: #000000;
        width: 100px;
        height: 100px;
        animation-name: drive;
        animation-duration: 2s;
        /*动画执行速度*/
        animation-timing-function:linear;
        /*重复次数*/
        animation-iteration-count: infinite;
        /*最后停留位置默认为none*/
        animation-fill-mode: backwards;
    }
    @-webkit-keyframes drive {
        0%{transform: translateX(0);}
        50%{transform: translateX(20px); }
        100%{transform: translateX(300px);}
        /*0% {
            transform: translateX(0px) scale(1);
        }
        100% {
            transform: translateX(200px) scale(1);
        }*/
    }

    /*鼓点*/
    .gudian {
        width: 10vw;
        height: 10vw;
        border:100px solid green;
        border-left-color:red;
        border-right-color: black;
        border-top-color: yellow;
        border-radius: 50%;
        left: 0;
        right: 0;
        margin: auto;
        /*动画执行*/
        animation-name: GuDian;
        animation-duration: 1s;
        /*动画执行速度*/
        animation-timing-function: linear;
        /*重复次数*/
        animation-iteration-count: infinite;
    }
    @-webkit-keyframes GuDian {
        /*0%{transform: rotate(0deg);}*/
        /*100%{transform: rotate(360deg);}*/
        0%{transform: scale(0);}
        100%{transform: scale(1);}
    }
    .gudian: Before {
        background: #000000;
        content: " ";
        border-color: #fff000;
    }

    /*灯笼*/
    .DVD {
        width: 10vw;
        height: 10vw;
        border:100px solid #000000;
        border-radius: 50%;
        border-left-color: blue;
        border-right-color: yellow;
        /*动画*/
        /*animation-name: TransDVD;*/
        /*animation-timing-function: linear;*/
        /*animation-duration: 1s;*/
        /*旋转方向 reverse(正) alternate(反)*/
        /*animation-direction: reverse;*/
        /*animation-iteration-count: infinite;*/
        animation: TransDVD 1s ease-out 0s infinite backwards;
    }
    @-webkit-keyframes TransDVD{
        0%{transform: rotate(0deg) scale(0.1);}
        100%{transform: rotate(360deg) scale(1);}
    }



.music {
    width: 174px;
    height: 174px;
    position: absolute;
    left: 400px;
    animation-name: plays,playsUp;
    animation-duration: 1s,0.75s;
    animation-delay: 0s, 1s;
    animation-timing-function: ease-in,linear;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    border-radius: 50%;
    border: 50px solid green;
    border-left-color: blue;
    border-right-color: yellow;

}
@-webkit-keyframes plays{
    0%{transform: translateX(-200px) rotate(0deg);}
    100%{transform: translateX(0px) rotate(360deg);}
}
@-webkit-keyframes playsUp{
    0% {
        transform: scale(1);
        animation-timing-function: ease-in;
    }
    25% {
        transform: scale(1.15);
        animation-timing-function: ease-out;
    }
    60% {
        transform: scale(0.9);
        animation-timing-function: ease-in;
    }
    100% {transform: scale(1);}
}

    </style>
</head>
<body>
    <div class="car"></div>
    <div class="gudian"></div>

    <div class="DVD"></div>
    <div class="music"></div>
</body>
</html>