夜灵的Html笔记Day13——CSS3过渡、animation动画

1、CSS3-过渡
1、什么是过渡
使得CSS属性值，在一段时间内，平缓变化的一个效果
2、过渡的要素 & 属性
1、指定过渡属性(必须的)
作用：指定哪个 css属性值，在变化时要使用过渡的效果
语法：transition-property
取值：
1、none
默认值，不使用过渡
2、all
能使用过渡效果的属性全部都使用过渡
3、具体属性名称
ex:
   transition-property:border-radius;边框倒角


页面中允许设置过渡的属性：
1、颜色属性    color 
2、取值为数值的属性       
   width,height,border,margin,padding,top,right,bottom,left....
3、转换       transform:位置，旋转，倾斜，缩放
              transform-origin:px,%,关键词
4、渐变属性    background:linear-gradient()
5、visibility属性   从无到有
6、阴影属性    box-shadow: 
2、指定过渡时长(必须的)
语法：transition-duration
取值：以 s 或 ms 为单位的数值
1s = 1000ms
***：该属性值，默认为0，即不会有任何过渡效果
3、指定过渡速度时间曲线函数
        指定速率
语法：transition-timing-function
取值：
1、ease
默认值,(慢速开始，快速变快，慢速结束)
2、linear
匀速
3、ease-in
慢速开始，快速结束...
4、ease-out
快速开始，减速结束...
5、ease-in-out
慢速开始和结束，先加速后减速
4、指定过渡延迟时间
延迟：用户激发操作后，等待多长时间再显示效果
语法：transition-delay
取值：数值（以 s 或 ms 为单位的）
5、过渡的简写方式
单写属性：
  transition:property duration timing-function delay;
                        多写：先后依次多写
transition:prop1 dur1 timing1 delay1,prop2 dur2;










pm:


1、动画(animation)
1、什么是动画
使得元素从一种样式逐渐变化为另一种样式的过程
动画是复杂的过渡
动画是通过 “关键帧” 来控制每个步骤
关键帧：由时间 和 动作来组成
2、动画的使用步骤
1、声明动画
1、为动画定义名称
2、定义动画的所有关键帧
2、为元素调用动画
3、声明动画的语法
通过 @keyframes 的规则来声明动画
             语法:
@keyframes 名称{
/*声明 若干 关键帧 （时间 ：动作(样式)）*/
0% | from{
/*动画开始时的动作(样式)*/
}
25%{
/*动画运行在1/4时的动作*/
}
50%{
     /*动画运行一半时的动作*/
}
100% | to{
/*动画结束时的动作(样式)*/
}
}
***:
兼容性
@-webkit-keyframes 名称{}
@-moz-keyframes 名称{}
@-o-keyframes 名称{}
@-ms-keyframes 名称{}
4、调用动画的语法
1、animation-name
指定当前元素 调用的动画名称
2、animation-duration
指定当前动画执行的总时长(一次动画过程)
取值：以 s 或 ms 作为单位的数值
3、animation-timing-function
指定动画执行时的速度时间曲线函数
ease,
linear,
ease-in,
ease-out,
ease-in-out


4、animation-delay
延迟
5、animation-iteration-count
指定动画的播放次数
取值：
1、具体数值
2、infinite
无限次播放
6、animation-direction
指定动画的播放方向
取值：
1、normal
默认值，从 0% ~ 100%
2、reverse
从100% ~ 0%
3、alternate
轮流播放
奇数播放次数时，从0%~100%
偶数播放次数时，从100%~0%
7、动画简写
animation:name duration timing-function delay iteration-count direction;




8、animation-fill-mode
指定动画播放"前后"的填充模式
取值：
1、none 
默认行为
2、forwards
动画完成后，保持在最后一个帧的状态上
3、backwards
动画播放前(延迟时间内)，保持在第一个帧的状态上
4、both
动画播放前后分别保持在第一帧和最后一帧的状态上
9、animation-play-state
指定动画的播放状态(暂停 | 播放)
取值：
1、paused
动画暂停
2、running
动画播放