CSS3 动画解析

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

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

具体属性可以参考

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

该实例实现绕圈动画

• 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)
    }
}
复制代码

• 效果

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

• 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%)
}
复制代码

• 效果

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

欢迎大家留言探讨~