动画animation
@keyframes规则
如需在css3中创建动画,需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项
css样式,就能创建由当前样式逐渐改为新样式的动画效果。
写规则时至少包含两个属性:规定动画的名称;规定动画的时长
写好规则,再使用animation属性来应用到某个元素
animation:myAnimation 5s;
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out动画以低速结束
ease-in-out 动画以低速开始和结束。
cd自转例子:
img{
width:100px;height:100px;border-radius:100%;
}
@keyframes CDturn{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
img:hover{
animation:3s linear infinite CDturn;
}
<img src="img/cd.jpg" alt=""/>
@keyframes规则
如需在css3中创建动画,需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项
css样式,就能创建由当前样式逐渐改为新样式的动画效果。
写规则时至少包含两个属性:规定动画的名称;规定动画的时长
写好规则,再使用animation属性来应用到某个元素
animation:myAnimation 5s;
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-out动画以低速结束
ease-in-out 动画以低速开始和结束。
cd自转例子:
img{
width:100px;height:100px;border-radius:100%;
}
@keyframes CDturn{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
img:hover{
animation:3s linear infinite CDturn;
}
<img src="img/cd.jpg" alt=""/>