day14 css动画应用

动画（animation）

<style>
div{
animation-name:x;//动画名称
animation-duratoin:10s;//持续时间
animation-delay:1s;//延迟时间
animation-direction:reverse;//动画效果，反转
animation-fill-mode:forwards;//保留最后一帧的样式
animation-iteraton-count:infinite;//动画执行的次数（循环）
animation-timing-funtion:liner;//动画时间曲线（线性）
animation-play-states:running;//动画暂停
}
@keyframes x {
from{
left:0;
}
to{
backgroud-color:pink;
left:1000px;
}
}

<style>

速写：animation：name duration direction timing-function；（常用）
在@keyframes中可以用10%20%来代替from、to。

第三方动画库【animate.css】

1.引入动画库
2.为动画添加class