一、CSS3触发动画常用的触发动作：1、鼠标悬停：hover2。选项选择：checked3。点击输入框：active4。过渡可以改善用户体验。转移开始状态和结束状态过程所需的条件。过渡时间（transition-duration）默认时间单位是0s，单位是s（秒）ms（毫秒）1s=1000mstransition-delayTransitiondelay表示变化延迟多少秒。转换默认值为0s。它可以是正的也可以是负的。负数表示整体transitionmotiontime=duration+delaytransition-property提前多少秒。transition属性指定transition属性作用于元素的样式。.all默认所有样式生效2.none没有transition属性3.多个样式名用逗号隔开指定样式一个恒定的速度，缓入，开始慢，然后快，缓出，开始快，然后慢，缓入缓出，两端慢，中间快Distancecubic-bezier(.3,-0.97,1,.21);x1y1x2y2x1和x2的值为0-1。任何过渡时间都不能省略y1和y2的值??。其他的可以省略。第一时间、第一持续时间、第二延迟过渡时间写在不同的位置，效果是不同的。1.没有开始，没有结束，什么也没有。不写2.开头有结尾，写在原元素上3.开头没有结尾，原元素在hover伪类中写过渡时间0s4.开头有结尾，不写在悬停伪类。大多数属性都支持过渡效果，注意Transition是从一个有效值到另一个值的过渡。过渡效果必须指定变化的开始、结束和时间。复合风格写法：transition:transition-propertytransition-durationtransition-delaytransition-timing-function例子：transition:width1s2slinear;过渡动画语法：.box{position:relative;左：0；宽度：200px；高度：200px；background:url("./images/bb.jpg")无重复中心/封面；transition:width1s2s线性；}2.CSS3活动动画(animation)一张一张的拼接效果是什么图片一张图片也叫关键帧利用原理视觉暂留动画的表示1.动画名称和时间2.动画过程描述中，可以用百分比面积来描述动画过程。N个关键帧有N-1个动画。动画和过渡的区别。有多个状态可以无限循环动画属性1.animation-name动画名称2.animation-duration动画时长3.animation-delay动画延迟4.animation-timing-function动画速率步长（motionstep）5.animation-iteration-count动画移动次数默认可以为一个动作写一个数值，表示动作次数，动作结束后回到初始位置。infinite6.animation-fill-mode动画结束时的状态backwards默认为返回初始位置forwards执行动画保留最终状态7.aniamtion-directionanimation方向防止元素不连贯。可选值为normal(0-100)reverse(100-0)alternate(0-100-0)只有移动次数大于等于2alternate-reverse(100-0-100）只有移动次数大于等于2才能看到效果动画的复合写法：animation:name(名称)duration(时间)timing-function(speed)delay(延迟)iteration-count(numberoftimes)direction（执行方向）fill-modepaly-Pause状态动画语法语法：.wrap{width:127.5px;高度：240px；背景：网址（./images/1.jpg）；动画：移动1ssteps(4)infinite;}@keyframes移动{0%{背景位置：00；}100%{背景位置：-510px0;}}
