CSS3 动画解析

栏目: CSS · 发布时间: 6年前

内容简介：CSS3 的 animation 是通过关键帧的形式做出来的。使用时常结合

一.Animation 动画

1. 含义

CSS3 的 animation 是通过关键帧的形式做出来的。使用时常结合 transform 属性进行制作。

2.animation 语法

animation 属性是一个简写属性，用于设置下方六个动画属性；

animation: name duration timing-function delay iteration-count direction;

值	描述
name	需要绑定到选择器 keyframes 的名称
duration	规定需要完成动画的时间
timing-function	规定动画的速度曲线
delay	规定动画开始前的延迟时间
iteration-count	规定动画应该执行的次数
direction	规定是否轮流方向播放动画

接下来将分析每个属性的取值：

1 . timing -function 属性

值	描述
linear	动画从头到尾的速度是一致的
ease	默认，开始时慢，慢慢加速，结束前减速
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2.iteration-count

值	描述
n	动画播放次数为 n
infinite	动画播放循环

3.direction

值	描述
normal	默认，动画正常播放
alternate	动画应该轮流反向播放

3.补充 transform 的属性

具体属性可以参考

http://www.w3school.com.cn/cssref/pr_transform.asp

4.实战

该实例实现绕圈动画

html 代码

<div class="mainBox">
    <div class="sun">
        <img src="../image/1.jpg">
    </div>
    <div class="earth">
        <img src="../image/1.jpg">
    </div>
</div>
复制代码

CSS 代码

.mainBox {
    position: relative;
    width: 600px;
    height: 600px;
}

.sun {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 250px;
}

.mainBox img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.earth {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 450px;
    transform-origin: -150px 50px;
    animation: rotate 5s linear forwards;
}

@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}
复制代码

效果

CSS3 动画解析

结合 clip-path 做动画

介绍 clip-path 是用来裁剪的，如对一个 div 应用 clip-path:circle(40% at 50% 50%),意为裁剪一个半径为 40%，圆心在(50%，50%) 位置的一个圆；使用 clip-circle 可用来做一些形状变化的动画

clip-path 实战

html 代码

<div class="imgBox">
    <img src="../image/1.jpg">
</div>
复制代码

CSS 代码

.imgBox img {
    clip-path: circle(10% at 50% 50%);
    transition: clip-path 8s ease-in-out;
}

.imgBox img:hover {
    clip-path: circle(40% at 50% 50%)
}
复制代码

效果

CSS3 动画解析

本文参考李银城的书籍《高效前端》

欢迎大家留言探讨~

以上所述就是小编给大家介绍的《CSS3 动画解析》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web Analytics 2.0

Avinash Kaushik / Sybex / 2009-10-26 / USD 39.99

The bestselling book Web Analytics: An Hour A Day was the first book in the analytics space to move beyond clickstream analysis. Web Analytics 2.0 will significantly evolve the approaches from the fir......一起来看看《Web Analytics 2.0》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

正则表达式在线测试

HEX HSV 转换工具

HEX HSV 互换工具