css的过渡效果以及动画

纯干货 只有命令 和命令的使用方式

1.过渡

使得css属性值，在一段时间内平滑变换的一个效果  1.过渡效果四要素     1.指定过渡元素       指定那个属性值在变化时需要使用过渡效果     2.指定过渡时间       多长时间完成过渡     3.指定过渡时间的快慢       过度变换中的快慢     4.指定过渡到延迟时间       当激发过渡后，等待多长时间才激发效果   2.过渡属性     1.指定过渡属性       属性:transition-property       取值 none | all | property-name       nmne：没有效果       all全部的元素都加上过渡效果       property-name:要使用过度效果的属性名     Ex：       1.transition-property：background；背景颜色发生改变时使用过渡效果       2.transition-property：border-radius；边框倒角发生改变时使用过渡效果 可以使用过渡效果的场合：       1.颜色属性 2.取值为数字的属性 3.转换属性 4.渐变属性       5.阴影属性 6.visibility (显示效果) 2.指定过渡时长 属性：transition-duration 取值 s| ms 秒 毫秒 默认值为零0s 即没有过渡效果 3.指定过渡时间速率 属性:transition-timing-function 取值： 1.ease 默认值，先满后快再变慢 2.linear 匀速 3.ease-in 慢速开始 慢速结束 4.ease-out 快速开始 慢速结束 5.ease-in-out 慢速开始结束，中间先快后慢 4.过渡延迟 属性：transition-delay 取值：s|ms 为单位的时间

命令简写： transition: property duration timing-function delay

div{ width: 200px; height: 200px; margin: 0 auto; background-color: blueviolet; } div:hover{ background-color: violet; transition:background 2s linear } //指定当鼠标移动到div元素上时背景颜色发生改变时使用过渡效果 时间为两秒 过渡时的快慢为默认值 延迟效果无 ps：这里只是用改变背景颜色时过渡 作为例子 还是和上面一样过渡可以用于多种场合

2.动画

 1、什么是动画     使元素从一种样式逐渐变化为另一种样式     其原理是通过 关键帧 控制动画的每一步     注意：浏览器兼容性     通过了浏览器前缀解决兼容性     -moz-     -webkit-     -o-  2、使用动画的步骤    1、声明动画      声明动画的名称，并且指定关键帧的信息      关键帧：         1、时间点         2、该时间点上的状态(样式)     2、使用动画       通过动画属性，将动画效果绑定到某个元素上    3、声明动画      语法:

@keyframes 动画名称{ 0%{ 动画开始时元素的样式声明 } ... ...(1% ~ 99%) 100%{ 动画结束时元素的样式声明 } }

  兼容 Chrome Safari

@-webkit-keyframes 动画名称{ 0%{ 动画开始时元素的样式声明 } ... ...(1% ~ 99%) 100%{ 动画结束时元素的样式声明 } }

  兼容 Firefox

@-moz-keyframes 动画名称{ 0%{ 动画开始时元素的样式声明 } ... ...(1% ~ 99%) 100%{ 动画结束时元素的样式声明 } }

   时间点：       0%(from) : 动画开始的时候       50% : 动画运行到一半的时候       100%(to) : 动画结束的时候  4、动画的调用    1、animation-name       要调用的动画名称    2、aniamtion-duration       动画完成一个周期需要用的时间       以s 或 ms 为单位    3、animation-timing-function       动画的 速度时间 曲线函数       ease       linear       ease-in       ease-out       ease-in-out      这里的函数和本文上面的过渡是一样的 点我查看   4、animation-delay    动画执行延迟时间     s|ms为单位  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属性      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           播放**