一、CSS3过渡（transition）一、基本概念在CSS3有过渡的概念之前，CSS没有时间轴，所有的状态变化都是瞬间完成的。使用CSS3，我们可以在元素从一种样式过渡到另一种样式时向元素添加效果，而无需使用Flash动画或JavaScript。2、使用方法如上图所示，当鼠标移到div上时，div会瞬间变大，非常突兀。.demo{宽度：100px；高度：100px；背景色：#84a1c9;}.demo:hover{width:200px;高度：200px；background-color:#87d1f1;}添加过渡以指定状态更改时间所需的内容。.demo{transition:all1s;}可以看出，要实现这一点，必须指定两件事：要给哪个css属性添加效果，以及效果持续时间注意：如果不指定持续时间，则有将没有过渡效果，默认值为0。3.过渡属性transition：简写属性，用于在一个属性中设置四个过渡属性。transition-property：指定应用过渡的CSS属性的名称。none：没有属性会得到过渡效果。all：所有属性都会得到转场效果。property：定义一个以逗号分隔的CSS属性名称列表，以应用过渡。transition-duration：定义过渡效果需要多长时间。默认值为0。time：指定完成转换所需的时间（以秒或毫秒为单位）。transition-timing-function：指定过渡效果的时序曲线。默认值为“轻松”。线性：指定以相同速度开始和结束的过渡。ease：指定开始缓慢，然后变快，然后缓慢结束的过渡效果。ease-in：指定以慢速开始的过渡效果。ease-out：指定以较慢的速度结束的过渡效果。ease-in-out：指定开始和结束速度较慢的过渡效果。cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义你自己的值。可能的值是0到1之间的数值。（贝塞尔曲线）transition-delay：指定过渡效果何时开始。默认为0。time：指定过渡效果开始前等待的时间，以秒或毫秒为单位。(1)当指定的属性发生变化时，我们也可以指定某个属性适合过渡，比如只指定高度。这个时候高度有一个变化的过程，其他的还是瞬间变化。.demo{transition:height1s;}(2)多处变化要为多个属性添加过渡效果，可以分别指定多个属性，以逗号分隔。demo{transition:height1s,background-color1s;}(3)延迟变化我们想先等宽度变化，结束后再让高度变化，最后背景变化。这很容易实现。为宽度和背景指定延迟参数。.demo{transition:width1s,height1s1s,background-color1s2s;}(4)结束状态改变transition中的值。当div处于悬停状态时，当样式发生变化时，重新定义transition属性的值，出现一个意想不到的意外情况：当鼠标移入时，结束状态的transition属性发生变化；当鼠标移出时，start状态的transition属性变回原来的样式。.demo{宽度：100px；高度：100px；背景色：#84a1c9；transition:height1s;}.demo:hover{width:200px;高度：200px；背景色：#1a93e8；transition:all1s;}四、使用注意事项1、浏览器支持2、并不是所有的CSS属性都支持transition，详情请点这里。3.Transition需要清楚知道开始状态和结束状态的具体值，才能计算中间状态。例如，如果高度从0px变为100px，则过渡可以计算中间状态。但是transition无法计算从0px到auto的中间状态，即如果start或end设置为height:auto，则不会产生动画效果。还有类似的情况，display:nonetoblock,background:url(foo.jpg)tourl(bar.jpg)等等。4.速记顺序a．当更改单个属性时，只有一个时间设置时，默认为transition-duration。b.当有两次时，第一次是transition-duration，第二次是transition-delay。C。当多个属性发生变化时，无论写在前面还是后面，所有变化的顺序由为每个属性设置的transition-delay的延迟时间决定。.demo4{transition:width1s,height1s1s,background-color1s2s;}.demo4{transition:height1s1s,background-color1s2s,width1s;}以上两种写法，最终效果是一样的。5.transition的局限性transition的优点是易于使用，但它有几个主要的局限性。(1)需要事件触发，不能在网页加载时自动发生。(2)一次性，除非多次触发，否则不会再次发生。(3)只能定义起始状态和结束状态，不能定义中间状态，也就是说只有两种状态。CSS动画就是为了解决这些问题而提出的。3.CSS3动画（animation）首先，要实现动画，必须规定三项：指定动画循环的持续时间。动画效果的名称使用@keyframes关键字来定义动画效果。demo{animation:myAn2slinear3alternateboth;}@keyframesmyAn{0%{transform:translateX(0)scale(1)rotate(0);}50%{transform:translateX(100px)scale(1.5)rotate(180deg);}100%{transform:translateX(200px)scale(1)rotate(360deg);}}1.@keyframes先说@keyframes，也叫关键帧动画，不需要给出每一帧的定义，只需要定义一些关键帧即浏览器会插值计算剩下的根据定时功能帧。0%可以用from表示，100%可以用to表示，所以上面的代码相当于下面的形式。@keyframesmyAn{来自{transform:translateX(0)scale(1)rotate(0);}50%{transform:translateX(100px)scale(1.5)rotate(180deg);}to{transform:translateX(200px)scale(1)rotate(360deg);}}如果省略某个状态，浏览器会自动计算中间状态，所以下面是合法的写法。@keyframesmyAn{50%{transform:translateX(100px)scale(1.5)rotate(180deg);}to{转换：translateX(200px)scale(1)rotate(360deg);}}@keyframesmyAn{到{转换：translateX(200px)scale(1)rotate(360deg);}}多个状态重复时，可以写在一行中，用逗号隔开。@keyframespound{从，到{转换：无；}50%{变换：缩放（1.2）；}}Browsersupport2.animationanimation使用@keyframes创建动画时，必须调用它，否则不会产生动画效果。用JS来说就是变量声明不行，必须要用。(1)动画属性可以通过开发者工具找到，动画属性是8属性的缩写。具体含义如下：animation-duration：指定动画完成一个循环所用的秒数或毫秒数。默认值为0。time：指定动画完成所花费的时间。默认值为0，表示没有动画。animation-timing-function：指定动画的速度曲线。默认值为“轻松”。linear：动画的速度从头到尾是一样的。轻松：默认。动画以低速开始，加速，然后减速结束。ease-in：动画以较慢的速度开始。ease-out：动画以较慢的速度结束。ease-in-out：动画以较慢的速度开始和结束。cubic-bezier(n,n,n,n)：cubic-bezier函数中的自有值。可能的值是从0到1的数值。animation-delay：指定动画何时开始。默认为0。时间：可选。定义动画开始前等待的时间，以秒或毫秒为单位。默认值为0。animation-iteration-count：指定动画播放的次数。默认值为1。n：定义动画播放次数的数值。infinite：指定动画应该无限播放。animation-direction：指定动画是否在下一个循环中反向播放。默认值为“正常”。正常：默认值。动画应该可以正常播放。reverse：表示动画反向播放。alternate：表示正向和反向交叉。alternate-reverse：表示反向和正向交叉。animation-fill-mode：指定对象在动画时间之外的状态。none：不改变默认行为。forwards：当动画完成时，保留最后一个属性值（在最后一个关键帧中定义）。向后：在动画显示动画延迟指定的时间段之前应用开始属性值（在第一个关键帧中定义）。both：应用前向和后向填充模式。animation-play-state：指定动画是运行还是暂停。默认值为“正在运行”。paused：指定动画暂停。running：指定动画正在播放。animation-name：指定@keyframes动画的名称。keyframename：指定需要绑定到selector的关键帧名称。none：指定没有动画效果。(2)属性详解，注意动画：myAn2slinear3alternateboth;两者都在声明中。它是属性动画填充模式的值。这个属性很容易被忽略，但却是CSS动画的一个重要属性。直译为动画填充模式，到底在说什么？@keyframes只是定义了动画过程中每一帧的值，但是动画开始前和动画结束后元素应该处于什么状态呢？这就是animation-fill-mode所说的。除了默认值none之外，还有3个其他值：forwards，表示动画完成后，元素的状态保持在上一帧的状态。backwards，意思是当有动画延迟时，在动画开始之前，元素状态保持在第一帧的状态。both，表示以上两种效果都可用。例如，div从100px移动到200px的关键帧定义为：@keyframesmove{0%{transform:translate(100px,0);}100%{转换：翻译（200px，0）；}}SettingsWhenfillmodeforwards,animationstaysat200pxatend:设置动画延迟1s后执行，fillmode为backward时，可以看到动画在开始前100px，动画结束后返回0px：最后设置填充模式为both时：动画结束后，保持动画最后一帧的状态。比如我们可以实现一个进度条：div{width:400px;高度：10px；边框：1px实心#e4e4e4；背景：线性渐变（向右，#30f3ed，#1a93e8）；背景重复：不重复；背景大小：0；边界半径：5px；动画：向前线性移动2s；}@keyframes移动{100%{background-size:100%;}}上面说了animation-delay可以用来设置延迟时间。值得注意的是，延迟可能是负数。负延迟意味着动画似乎在开始之前已经运行了那么久。以上面的进度条为例，原动画从0%加载到100%耗时2s。如果将延迟设置为-1s。此动画将从50%加载到100%。就像它已经运行了1s：css动画可以暂停。属性animation-play-state表示动画播放状态，默认值running表示播放，paused表示暂停。浏览器支持3.如何使用Animate.cssAnimate.css是一个使用CSS3动画制作的CSS动画效果集合。里面预设了很多常用的动画，非常好用。官网：https://animate.style/1。参考npminstallnpminstallanimate.css--save或者使用在线cdn
