动画——animation部分
Posted 起个好名字
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画——animation部分相关的知识，希望对你有一定的参考价值。
动画部分是html5的新增部分，其特性是可以不借助js代码就可以单单凭借着css部分完成部分动态效果。其效果华丽，强大，炫酷无比，只要你想得到的动态效果都可以通过css3来完成。
<style>
.lizhi{
background: red;
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 0;
}
.tranition{
/*transition: all 1s linear;*/
transition-property: background,margin,border-radius;/*规定渐变的属性*/
transition-duration: 1s;/*渐变的时间*/
transition-timing-function:linear;/*匀速渐变*/
}
.lizhi:hover{background: yellow;
border-radius: 50% 50%;
margin-left: 60px;}
</style>
<body>
<div class="lizhi tranition">
</div>
</body>
以上部分就是代码，可以看出这里面并没有引入js。
动态效果全部在.tranition这个类里面
第一句：transition: all 1s linear;
这一句是简写，代表所有属性都可以调整，在1秒中执行完毕，执行速度为匀速
下面的几句：
transition-property代表属性，属性之间用逗号隔开，在这里没有声明的属性是不会有渐变效果的，例如如果将background去掉，那么当鼠标放上去的瞬间，这个div的颜色就会改变，而其他的属性则继续延迟执行。
transition-duration代表执行时间，一个完整地动画所需要的时间。
transition-timing-function代表运行时的速度，这个速度由来是根据贝塞尔函数来的，其中可选择由快到慢，由慢到块，匀速，或者自定义等等。
以上是关于动画——animation部分的主要内容，如果未能解决你的问题，请参考以下文章