CSS3에서 전환과 애니메이션의 차이점 소개

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

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：0.4s;}

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

이 점진성은 어디에서 오는가? 네, 0.4초입니다.

0.4초에 대해 이야기할 때 전환의 다양한 속성에 대해 이야기해야 하지는 않습니다. 자세한 내용은 여기에서 확인하실 수 있으니 블로그에 모두 적어두었습니다.

(1: 위의 0.4s는 전환 속성 중 하나인 전환 기간(transition-duration)의 약어입니다.

전환 기간은 이름에서 알 수 있듯이 기간을 나타냅니다. 위의 0.4초인 animation. 배경색과 글꼴 색상의 애니메이션이 0.4초만에 완성됩니다. (2: 0.4초의 연속 애니메이션이라면 객체의 이동 속도를 이야기해야 합니다. 사물에는 다음과 같은 유형의 움직임이 있음을 알아두세요:

　 (선형: 균일

　 (b이지인: 가속

) (c이지아웃: 감속

　 (d 큐빅-베지어

함수

: 사용자 정의 속도 모드(거의 사용하지 않음)

위 코드에서는 전환만 간단히 작성합니다: 0.4 s; 왜 움직임이 있나요?

(3: 이렇게 전환에는 전환 타이밍 기능이라는 속성이 있고 기본값은 여유이며 움직임이 점차 느려집니다.

는 전환으로 축약되지 않습니다: 0.4초 용이성

d. 버튼을 가리키면 CSS에서 설명하는 모든 변경 사항이 전환 애니메이션으로 설명됩니다. 🎜>

이 문장에 대한 설명이 조금 복잡합니다. 코드를 사용하여 직접 설명하겠습니다.

1) 일정 기간 동안 배경색만 변경하려면 어떻게 하나요?

transition: 0.4s background ease-in

2) 위 코드에서는 배경이 보입니다. 그렇습니다. 애니메이션의 배경색은

이름에서 알 수 있듯이

e, 실제 프로젝트에서 프레젠테이션을 지연시키기 위해 애니메이션이 필요한 경우도 있고 애니메이션이 즉시 생성되는 것을 원하지 않는 경우도 있습니다.

이때 전환의 또 다른 속성인 전환 지연이 나옵니다.

코드 보기:

transition: 0.4s 1s;

이 시점에서 이 버튼의 배경 글꼴 애니메이션이 시작되는 것을 볼 수 있습니다.

----> 전환은 간단하고 사용하기 쉽지만 다양한 제한 사항이 있습니다.

1: 전환을 실행하려면 마우스 오버와 같은

이벤트

가 필요하므로 웹페이지가 로드될 때 자동으로 발생할 수 없습니다.

2: 전환은 일회성이며 반복적으로 트리거되지 않는 한 반복적으로 발생할 수 없습니다. 3: 전환은 시작

상태

와 끝 상태만 정의할 수 있지만 중간 상태는 정의할 수 없습니다. 즉, 두 가지 상태만 있음을 의미합니다.

4: 전환 규칙은 하나의 속성에 대한 변경 사항만 정의할 수 있으며 여러 속성을 포함할 수 없습니다.

(명확하게 표현하자면 위의 4가지 제한 사항은 Ruan Yifeng의 블로그에서 인용한 소개를 기반으로 합니다.)

돌파를 위해 이러한 제한으로 인해 애니메이션이 나왔습니다.

2: animation:

a) 애니메이션의 다양한 속성을 자세히 설명하지 말고 바로 보여주는 코드로 들어가겠습니다

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

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

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

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其中的一个属性，叫做动画名字-----》 animation-name:change;

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的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：animation-duration: 2s;

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

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

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

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

　　　　 *：不用想，他也是animation其中之一属性：叫做 animation-iteration-count: infinite;

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

animation-iteration-count: 3;

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

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

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

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

-------------》animation-fill-mode:forwards;

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

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

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

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

　　　　　　　　　　　　　　　　　　　　------------》animation-delay: 1s;

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

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

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

　　　　　　　　　　　　　　　　------------------》animation-timing-function: ease;

　　　　

　　　 （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;}

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

 

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。

 

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