>  기사  >  웹 프론트엔드  >  CSS3 애니메이션의 전환 및 애니메이션 속성 소개

CSS3 애니메이션의 전환 및 애니메이션 속성 소개

青灯夜游
青灯夜游앞으로
2018-10-11 16:07:192993검색

이 글은 CSS3 애니메이션을 구현하기 위한 전환 및 애니메이션 속성을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

tradition에는 총 4가지 속성이 있습니다.

  • transition-property 전환 속성

  • transition-duration 애니메이션을 완료하는 데 필요한 시간(초 또는 밀리초 단위로 계산)

  • transition- timing-function 애니메이션 변경 속도 곡선을 지정합니다.

  • transition-delay 지연 여부

transition-property 전환 속성

none: 어떤 속성도 전환 효과를 얻지 않습니다.

all: 모든 속성이 전환 효과 얻기

속성: 너비, 높이...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

전환 기능은 상태 변경에 필요한 시간을 지정하는 것입니다.

img{
    transition: 1s;
}

transition-duration 초 또는 밀리초로 상태 전환을 완료합니다

너비 변경이나 높이와 같은 전환의 변경 속성을 지정할 수도 있습니다.

img{
    transition: 1s height;
}

여러 속성을 지정할 수도 있습니다

img{
    transition: 1s height, 1s width
}

transition- 지연 상태 변경 속도 .

높이가 먼저 변경된 다음 너비가 변경되도록 지연 매개변수를 지정합니다.

img{
    transition: 1s height, 1s 1s width
}

지연의 실제 의미는 애니메이션이 발생하는 순서를 지정하여 서로 다른 시간에 여러 가지 전환이 발생할 수 있도록 하는 것입니다. form one 애니메이션 효과

transition-timing-function 상태 변경 속도

기본값은 점차적으로 느려지는 여유로움

가능한 값은

  • linear: 균일한 속도

  • easy-in: 가속

  • ease -out: 감속

  • cubic-bezier 기능, 사용자 정의 속도 모드

(3차: 3차, 베지어: 베지어 곡선)

cubic-bezier(bc6fe54a88198feaad90e17e912675f1, f04fcef6a868c1a53d88fab12fabfa0a, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8) 값 범위는 0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}

참고: 중간 상태를 계산하려면 전환에서 시작 상태와 끝 상태의 특정 값을 알아야 합니다. 그러나 전환은 0->auto 상태를 계산할 수 없으므로 애니메이션 효과가 없습니다. 유사한 상황에는 display: none->block 및 background:url(foo.jpg)->url(bar.jpg)이 포함됩니다.

단점이 있습니다.

  1. 이벤트 트리거가 필요하며, 이는 웹페이지가 로드될 때 직접 발생할 수 없습니다.

  2. 는 일회성 이벤트이며 반복적으로 트리거하지 않는 한 반복적으로 발생할 수 없습니다. 시작 상태와 끝 상태만 정의하고 중간 상태는 정의할 수 없습니다.

  3. 전환 규칙은 하나의 속성 변경만 정의할 수 있습니다.

  4. animation

CSS 애니메이션에는 다음과 같은 속성이 있습니다. 총계:

animation-name을 바인딩해야 합니다. 선택기 keyframe의 이름을 설정합니다. 애니메이션의 속도 곡선

  • animaton-delay 애니메이션 시작 전 지연 시간

  • animation-iteration-count 애니메이션 재생 횟수

  • animation-direction 애니메이션 재생 여부 반대로

  • animation-fill-mode 속성은 애니메이션이 재생된 후 애니메이션의 동적 효과가 표시되는지 여부를 지정합니다.

  • animatoin-play-state는 애니메이션이 실행 중인지 일시 중지되었는지 여부를 지정합니다

  • 반복-반복
  • 애니메이션 이름
  • 애니메이션 기간

首先 设置动画的名称和持续的时长

p:hover{
animation: 1s rainbow;
}

上面代码表示,当鼠标悬停在p元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。

@keyframs rainbow{
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

keyframs的写法相当自由

可以用from表示0%,to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果忽略某个状态,浏览器会自动推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}

浏览器从一个状态到另外一个状态是平滑过渡到,steps函数实现分步过渡

p:hover {
animation: 1s rainbow infinite steps(10);
}

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。

p:hover{
animation: 1s rainbow infinite;
}

除了infinite,还可以设置为具体的次数: 3、5

p:hover{
animation: 1s rainbow 5;
}

animation-fill-mode

动画结束以后会立即冲结束状态回到起始状态,如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}

animation-fill-mode 有4种取值

none  不改变默认行为

forawads  动画完成后,保持最后一个属性(在最后一个关键帧中定义)

backwards  在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both  向前向后都进行填充

animation-direction

规定了轮流反向播放动画

alternate:动画会在奇数次(1,3,5...)正常播放,偶数次(2,4,6...)反向播放

最常用alternate和revers,浏览器对其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程

相关推荐:

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

css3特效代码大全

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

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제