您的位置：首页 > Web前端 > CSS

css3中变形与动画（三）

2015-08-03 12:24 609 查看
transform可以实现矩阵变换，transition实现属性的平滑过渡，animation意思是动画，动漫，这个属性才和真正意义的一帧一帧的动画相关。本文就介绍animation属性。

animation属性通过一些关键帧中元素属性的改变来实现动画效果。当然也可以控制动画持续时间，动画迭代次数等。

一、例子

在介绍transition时开篇有一个例子就是实现鼠标放上去，div宽度从100px缓慢增大到200px。

用transition实现方法如下

div:hover{
width: 200px;
transition:width 5s ease-in;
}


用animation也能实现类似效果，如下：

<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
}
@keyframes enlarge {
0% {
width: 100px;
}
50% {
width: 150px;
}
100% {
width: 200px;
}
}
div:hover {
/*width: 200px;    */
/*transition:width 5s ease-in;*/
animation: 5s enlarge;
}
}
</style>
<div></div>


鼠标悬停，动画持续5s，在时间到一半时div的宽度要从100px达到150px,5s时div宽度达到200px，动画结束。

但是transition和animation效果还是有差别的，鼠标hover上去，transition动画执行完后width保持200px;animation动画执行完后width回到100px。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>animation by starof</title>
<style>
body{margin:0;}
.w4{
height:200px;
background-color:#ef9b14;
position: relative;
}
/*绝对定位*/
.w4 .buy-icno{
position:absolute;
top:0;
right:50%;
margin-right:-472px;
z-index:5;
}
/*infinite动画一直重复*/
.w4 .buy-icno{
-webkit-animation:transform 2.5s linear infinite forwards;
-moz-animation:transform 2.5s linear infinite forwards;
-ms-animation:transform 2.5s linear infinite forwards;
animation:transform 2.5s linear infinite forwards;
}

.w4 .buy-icno:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
animation-play-state:paused;
}
/*4个时间段，0%到25%，从最低点到左上;25%到50%，从左上到最低点；50%到70%，从最低点到右上;70%到100%,从右上到最低点*/
@-webkit-keyframes transform {
0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes transform {
0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

</style>
</head>
<body>

<div class="w4">
<a href=""><img class="buy-icno" src="images/buy-icno1.png"></a>
</div>
</body>
</html>


View Code
原理：

动画分为4个时间段，0%到25%，从最低点到左上;25%到50%，从左上到最低点；50%到70%，从最低点到右上;70%到100%,从右上到最低点。

然后设置动画重复次数为infinite,即animation-iteration-count:infinite;一直重复。

鼠标hover上去设置animation-play-state:paused;动画暂停。

设置动画播放速度为线性animation-timing-function:linear，所以动画一直是匀速的。

设置animation-fill-mode:forwards;动画完成停在最后一帧，不过这个在本动画中没什么影响。

动画具体内容用的是transform变形动画，深入学习可参考css3中变形与动画（一）。

设置transform-origin:top center;变形的基点默认是中心点，我们需要将其设置为上面这个"绳子"不动，也就是图片的top center位置。

25%时到达左上;实现的时候就是顺时针旋转20度。同理75%是逆时针旋转20度。

0%，50%，100%时都说旋转0度，即不改变。

五、相关资源

看网上资料说做动画，尽量使用绝对定位，从而避免重绘重排问题：

动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

动画十二原则：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

传说中动画利器——css3 animation动画库，有很多基础动画

http://daneden.github.io/animate.css/

[github 地址：https://github.com/daneden/animate.css]

hover animation动画

http://leaverou.github.io/animatable/

CSS3 Animation制作飘动的浮云和星星效果

css3 animation在线调节工具：

http://melonh.com/animationGenerator/ 基于chrome的插件，可以快速调节页面上的动画

http://isux.tencent.com/css3/tools.html 腾讯isux一款非常强大的动画工具

http://tid.tenpay.com/labs/css3_keyframes_calculator.html 财付通的帧动画调节工具

参考资源链接：

css3 animation动画技巧

跳动心脏

闪烁的星星

w3c css3-animations

MDN animation-fill-mode

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：/article/5239315.html有问题欢迎与我讨论，共同进步。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航