学习了一段时间CSS，总感觉自己行了，想自己写一个网页。打开别人网页的模板一看，好炫酷这图怎么还会转动。一下子涉及到了我的知识盲区，其实这就涉及到了CSS的动画效果。

CSS动画基础

一、

CSS @keyframes 规则

要创建 CSS 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

使用@keyframes的代码如下所示：

@keframes first {
from{}
to{}
}
或者
@keyframes first {
0%{}
100%{}
}

 

　　想要编写CSS的动画，肯定要先给他一个名字，不给他名字谁知道它是谁呢。

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长
div {
animation:first 1s
}

 

注意：动画的默认值都是0，如果你想要的运行动画，必须定义动画的名称和动画的持续时间。

 

CSS3的动画属性

 

下面的表格列出了 @keyframes 规则和所有动画属性：

css实现的 keyframes 动画 js如何使用 用css实现动画效果_动画效果

 

 想必学到这里你已经对于CSS的动画效果有了一定的了解了，接下来让我们试试自己动手来写一个CSS的动画吧！

我们来制作一个会旋转的太极图

首先是HTML部分，这部分很简单只需要建一个盒子

<div class="taiji"></div>

然后到了我们的重头戏，CSS部分这部分我们需要给太极盒子附上颜色大小和今天学的动画效果：

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ccc;
}

.taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-right: 150px solid #000;
    background-color: #fff;
    border-radius: 150px;
    animation: rotate 2s infinite linear;
}

.taiji::before,
.taiji::after {
    content: '';
    margin-left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 50px solid #000;
    border-radius: 75px;
}

.taiji::after {
    background-color: #000;
    border: 50px solid #fff;
}

@keyframes rotate {
    from {}

    to {
        transform: rotate(-360deg);
    }
}

到这里我们已经学习到了CSS动画效果的一些基础了，学无止境，fighting！