柚子快报邀请码778899分享：34.前端笔记-CSS3-动画
1、动画
动画animation是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
2、动画的基本使用
1、先定义动画 2、在使用动画
2.1 定义动画keyframes
2.1.1 动画序列
0%是动画的开始，100%是动画的结束，范围是0-100。这样的规则就是动画序列在@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变为另一种样式的效果 。可以改变任意多的样式，任意多的次数要用百分比规定变化发生的时间，或用关键词“from"和”to"，等同于0%和100%
2.1.2 语法
/*动画名称是自己取得*/
@keyframes 动画名称{
/*开始状态*/
0%{
width:100px;
}
/*结束状态*/
100%{
width:200px;
}
}
2.2 元素使用动画
2.2.1 语法
div{
/*调用动画*/
animation-name:动画名称;
/*持续时间,单位是秒s*/
animation-duration:持续时间;
}
练习1：
打开页面，盒子就从左边走到右边
动画1
练习2：
设置动画多个状态，盒子转一圈回到原点
动画2
练习3：波纹放大
opacity:透明度属性0-完全透明 1.0完全不透明 position：定位 box-shadow:阴影 animation:pulse 1.2s linear infinite
动画3波纹效果
2.3 动画的属性
动画属性简写
前两个属性（动画名称 持续时间）一定要写，其余可以省略 简写属性里不包括animation-play-state，要用的话得单独写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
animation: move 5s linear 2s infinate alternate;
速度曲线细节
animation-timimg-function:规定动画的速度曲线，默认是ease
值描述linear匀速ease默认。低速开始-然后加快-结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束steps()指定了时间函数中的间隔数量（步长）
动画3步长
练习：极光下奔跑的熊
奔跑的熊
柚子快报邀请码778899分享：34.前端笔记-CSS3-动画
参考链接
发表评论