CSS3에서 전환과 애니메이션의 차이점과 연결 비교

** 저는 오랫동안 프로젝트를 진행해 왔습니다. CSS3 속성인 transition과 animation 두 가지는 실제 프로젝트에서 자주 사용됩니다. 다음과 같습니다:

1: 먼저 전환을 소개합니다:

a. 프로젝트를 수행할 때 마우스를 이동하면 배경색과 글꼴 색상이 바뀌는 등의 상황이 자주 발생합니다. 이때 버튼 변경은 일반적으로 수행됩니다.

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;}

b. 특히 뻣뻣해 보이지 않나요? 이때 코드가 표시됩니다.

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：.4s;}

c, 전환을 추가한 후 버튼 배경 색상과 글꼴 색상이 끝까지 시간이 지남에 따라 점진적으로 진행되는 것을 확인할 수 있습니다.

이 점진성은 어떻게 생기는 걸까요? 네, .4초입니다. (약칭은 0.4초입니다.

0.4초라고 하면 전환의 다양한 속성에 대해 이야기해야 합니다. 자세히 설명하지는 않겠습니다. 여기 블로그에 적어주세요. 정보는 직접 확인하실 수 있으니

(1: 위의 0.4s는 전환 속성 중 하나인

transition-duration<p> <span style="background-color: #ff6600"><code class=" language-css">transition-duration

 transition-duration 顾名思义，表示动画持续的时间，也就是上面的0.4s了。在0.4秒的时间中完成背景颜色以及字体颜色的动画。

（2：涉及到0.4秒中持续的动画，我们就要谈及物体运动的快慢了，我们知道一个事物所具备的运动具有这几种：

　　　  （a  linear：匀速

　　　  （b  ease-in：加速

　　　  （c  ease-out：减速

　　  　（d  cubic-bezier函数：自定义速度模式（几乎不用）

 

上面代码中就简简单单只写了transition：0.4s;为什么具备有一个运动呢？

（3：是这样子的，transition有一个属性叫做transition-timing-function，默认是ease，它运动的形式是逐渐放慢的。

不简写就是 <span class="token property">transition<span class="token punctuation">: 0.4s ease</span></span>

 

d，我们看到，按钮hover之后，hover样式里所有css描述的变化都具备有transition所描述的动画。

这句话我解释的有点绕口，我们直接上代码解释吧：

1）若是只想让背景颜色具备一个时间段的变化，我们该怎么做呢？

transition: 0.4s background ease-in

2）我们在上面这句代码中看到了background，是的没错，就是因为它指定了动画中只背景颜色具备这个时间段的动画。

它是transition其中一个属性的简写，叫做：transition-property，顾名思义，指定属性。

 

e，我们在实际项目中会发现，有时候我们需要一个动画具备有一个延迟的展现，不希望他立即就产生动画

此时，transition的又一个属性就出来了，transition-delay transition-duration 이름에서 알 수 있듯이 위의 0.4초인 애니메이션 지속 시간을 나타냅니다. 색상 및 전환이 0.4초 안에 완료됩니다. 글꼴 색상의 애니메이션

(2: 0.4초 안에 연속 애니메이션을 하려면 속도를 이야기해야 합니다. 객체 움직임. 우리는 몇 가지 종류의 움직임이 있습니다. 모드 (거의 사용되지 않음)

🎜위 코드는 단순히 전환: 0.4s를 작성합니다. 왜 모션이 있나요? 🎜🎜 (3: 이런 식인데 전환에는 🎜transition-timing-function🎜, 기본값은 easy이며, 움직임이 점차 느려집니다. 축약하지 않으면 <span class="입니다. token property">transition<span class="token tempotion">: 0.4s easy🎜🎜</span></span>🎜🎜 🎜🎜d,보다시피, 버튼을 가리키면 모든 변경 사항이 호버 스타일의 CSS에 의해 설명된 애니메이션은 전환에 의해 설명됩니다.
🎜🎜🎜이 문장에 대한 설명이 다소 복잡하므로 바로 살펴보겠습니다. 코드를 설명하세요: 🎜🎜🎜1) 일정 기간 동안 배경색만 변경하려면 어떻게 해야 하나요? 🎜🎜🎜

transition: 0.4s 1s;

🎜🎜2) 위 코드에서 배경을 보았는데, 그 이유는 애니메이션의 배경색만 이 기간을 갖도록 지정했기 때문입니다. 🎜🎜이름에서 알 수 있듯이 🎜transition-property🎜라고 하는 전환 속성 중 하나의 약어입니다. , 속성을 지정합니다. 🎜🎜 🎜🎜e, 실제 프로젝트에서 때로는 지연된 표시를 위해 애니메이션이 필요하고 애니메이션이 즉시 생성되는 것을 원하지 않는 경우가 있습니다🎜🎜🎜 이번에는 전환의 또 다른 속성인 🎜transition-delay🎜🎜🎜코드 보기: 🎜🎜

　　　　 .c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; }
        .c:hover{animation: 2s change infinite;}

        @keyframes change {
            0% { background: orange; }
            50% { background: pink;width: 200px; }
            100% { background: red;height: 300px; }
        }

🎜

我们会发现，此时这个按钮的背景字体动画是在1秒钟之后才开始的。

 

----》   transition虽然简单好用，但是我们会发现它受到各种限制。

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生

2:  transition是一次性的，不能重复发生，除非一再触发。

3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

 

（为了表达清晰，上述4条限制是我引用阮一峰大神博客里的简介）

 

为了突破这些限制，animation出来了。

 

2：animation：

 a）,先不详细解释animation的各项属性了，直接来看代码吧

　　　　 .c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; }
        .c:hover{animation: 2s change infinite;}

        @keyframes change {
            0% { background: orange; }
            50% { background: pink;width: 200px; }
            100% { background: red;height: 300px; }
        }

 

 上面的代码会产生这样的效果，见截图：

b），当鼠标移入div的时候，div会发生一系列的样式改变（截图无法表现过程），在2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画，是因为什么呢？

 

 c），我准备作这样的解释，此时，你需要做一个animation动画只需要3点

 1. 需要一个承载动画的元素，如div

 2. 当前的元素写一个animation的css，其中定义你所需要这个动画产生的效果。（你暂时不需要知道如何编写这个动画内部的css）

 3. 编写一个动画进程，以@keyframes关键字来定义，而这个动画的进程有一个名字，如change，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----------》你可以把这个进程理解成一个函数，@keyframes对应的就是function，而change对应的就是函数名字-----------》最终等待被调用。

 

 好了，明白了以上三点，我们就可以来剖析animation的庐山真面目了。

 

 a）我们接着再来看这段代码：

animation: 2s change infinite;
　　　　

@keyframes change {
       0% { background: orange; }
       50% { background: pink;width: 200px; }
       100% { background: red;height: 300px; }
}

 

1. 我们先来看这个“所谓的函数change”

　　　　(1):这个change是animation其中的一个属性，叫做动画名字-----》 <span class="token property"><span style="background-color: #ff6600">animation-name</span><span class="token punctuation">:change;</span></span>

2. 我们再来看这个“百分比”

　　　  (1):这个百分比你只要理解它是这个这个动画在多少时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改变的的样式属性（可以定义多种）

　　　  (2):当然也可以这样写：

@keyframes change {
            from { background: orange; }
            50% { background: pink;width: 200px; }
            to { background: red;height: 300px; }
}

 

 3.看完了动画制作的过程，现在我们来看如何调用这个动画：见代码：

.c:hover{animation: 2s change infinite;}

 （1），机智的你肯定看到了2s，是的没错，就是它让动画2秒完成。和transition一样，它是animation的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：<span class="token property">animation-duration<span class="token punctuation">: </span></span>2s;

 （2），机智的你肯定看到了change,是的没错，就是如此调用这个“动画函数”的.只需要在当前元素animation的css样式里写入就可以了。

 

  （3），刚刚前面我们说了，这段代码会在鼠标移入div元素后2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画

　　　　 *：注意看到无限制三个字，

　　　　 *：无限制怎么来的呢？此时这段代码只剩下infinite了。

　　　　  *：不用想，他也是animation其中之一属性：叫做 <span class="token property">animation-iteration-count<span class="token punctuation">: infinite;</span></span>

　　　　  *：这个属性是用来定义这个动画应该播放多少次，infinite代表的无限制（无数次），当然你也可以在让它播放一个定值的数次，比如3次

animation-iteration-count: 3;

 在这里，你只需要在animation里的css里写入次数就可以了：

.c:hover{animation: 2s change 3;}

 

 

 4：这个动画虽然已经介绍完了，但是我们会发现动画在两秒钟后又会恢复原样（初始状态）：

此时我们想让动画两秒执行完毕之后保持在结束状态，这该怎么办了，此时animation的另一个属性就派上用场了

                                                                        -------------》<span class="token property"><span style="background-color: #ff6600">animation-fill-mode</span><span class="token punctuation">:forwards<span class="token punctuation">;</span></span></span>

在这里，你只需要在animation里的css里写入forwards就可以了：

.c:hover{animation: 2s change 3 forwards;}

2秒动画结束后就会是这样：

 

 看看两者区别：

Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。 Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。 Animation模块包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等属性。 其实说这么多，一句话就是：Transform和width、left一样，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。

 

 5：同样的，animation也和transition一样具备延时动画的属性：

　　　　　　　　　　　　　　　　　　　　------------》<span class="token property">animation-delay<span class="token punctuation">: 1s<span class="token punctuation">;</span></span></span>

同样的animation简写写法如下,代表鼠标移入div内，1秒后动画开始

.c:hover{animation: 2s 1s change 3 forwards;}

 

6：同样的，animation也和transition一样具备动画以何种速度呈现的属性：默认是ease，它运动的形式是逐渐放慢的。

　　　　　　　　　　　　　　　　------------------》<span class="token property">animation-timing-function<span class="token punctuation">: ease<span class="token punctuation">;</span></span></span>

　　　　

　　　  （a  linear：匀速

　　　  （b  ease-in：加速

　　　  （c  ease-out：减速

　　  　（d  cubic-bezier函数：自定义速度模式（几乎不用）

 

****要改变运动形势只要添加相应的速度代表参数了，见代码：

.c:hover{animation: 2s 1s change 3 forwards linear;}

 

7:animation还有一个属性我就不打算细写了，--------》animation-direction，默认情况下是normal，

　　它是用来改变动画播放不仅只可以从结束状态跳回到起始状态这种形式。

 

8：上面说过，animation浏览器一加载便可以自动触发：

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; animation: 2s change forwards;}

** 此时你会发现，浏览器一运行这个div就开始动画了。至于什么时候触发，那就要看项目具体需求了。

 

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。如果此文对你有所帮助, 请不要吝啬你的赞哦~

 

위 내용은 CSS3에서 전환과 애니메이션의 차이점과 연결 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!