CSS 애니메이션 구현에 대한 자세한 설명과 예시
- 高洛峰원래의
- 2017-03-28 17:40:132533검색
CSS3의
css3 애니메이션
애니메이션 효과를 얻기 위해 애니메이션을 제어하는 데 사용되는 애니메이션을 통해 복잡한 애니메이션 시퀀스를 만들 수 있습니다. 애니메이션은 주로 두 부분으로 구성됩니다.
- 더 복잡한 애니메이션 효과를 얻으려면 animation 속성에서 keyframes로 선언된 애니메이션을 호출하세요.
- CSS3에서는
키프레임을 키프레임이라고 합니다.
키프레임의 구문 규칙은 다음과 같습니다. 키프레임으로 시작하고 그 뒤에 애니메이션 이름(애니메이션 이름)이 옵니다. 중괄호 쌍 "{...}". 괄호는 여러 기간에 대한 스타일 규칙입니다. > 키프레임의 스타일 규칙은 여러 백분율로 구성됩니다. 키워드를 사용할 수 있습니다. "from", "to"는 애니메이션의 시작과 끝을 나타내며, "from"은 0%, "to"는 100%에 해당합니다.
@keyframes yxz {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
여기서 "yxz"라는 애니메이션을 정의합니다. ". 해당 애니메이션은 0%에서 시작하여 100%에서 끝나며 40%와 60% 두 가지 프로세스를 거치게 됩니다. 위 코드의 구체적인 의미는 "yxz" 애니메이션이 0%일 때 요소는 는 왼쪽 위치 100px에 위치하며 배경색은 녹색이고 40%에서는 요소가 왼쪽 위치 150px로 전환되고 배경색은 주황색입니다. 왼쪽은 75px이고 배경색은 파란색입니다. 마지막으로 애니메이션이 100%로 끝나면 요소는 왼쪽이 100px인 시작점으로 돌아가고 배경색은 빨간색이 됩니다. 실행 시간이 10초이면 각 실행 세그먼트의
상태는 다음과 같습니다. @@@@
keyframes 애니메이션을 선언한 후 애니메이션이 적용되도록 하려면 CSS 속성을 통해 keyframes에서 선언한 애니메이션을 호출해야 합니다.
키프레임 호출
애니메이션 속성 animation을 사용하여
@keyframes yxz{
0%,40%{
width:200px;
height:200px;
}
20%,60%,80%{
width:100px;
height:100px;
}
100%{
width:0;
height:0;
}
}
@
@animation-name@: 주로 키프레임 애니메이션의 이름을 지정하는 데 사용됩니다. 이 이름은 keyframes 이름은 같습니다. CSS가 애니메이션을 로드할 때 해당 이름을 사용하여 실행합니다.
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *</animation-fill-mode></animation-play-state></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name>
IDENT:
키프레임으로 생성된 애니메이션의 이름입니다. 없음: 기본값입니다. 값이 없음이면 애니메이션 효과가 없으며 애니메이션을 재정의하는 데 사용할 수 있습니다. @
animation-duration
: 주로 애니메이션 재생에 필요한 시간을 설정하는 데 사용되며 단위는 s(초) 또는 ms(밀리초)이며 기본값은 0입니다.
animation-name:none | IDENT [,none | IDENT] *
animation-timing-function: 주로 애니메이션 재생 속도를 설정하는 데 사용됩니다. @
@
animation-delay
animation-duration:<time> [,<time>] *</time></time>시간이 양의 정수 이면 지연 시간입니다. 음의 정수이면 재생 시간이 잘립니다(animation-duration에서 사용되는 시간의 일부가 잘립니다). 즉, 이 부분의 값을 건너뛰고 후속 애니메이션을 직접 수행)
animation-iteration-count
: 주로 애니메이션이 재생되는 횟수를 설정하는 데 사용됩니다.animation-duration:<time> [,<time>] *</time></time>일반적으로 정수, 부동 소수점 숫자도 사용할 수 있습니다. 기본값은 1입니다. 값이 무한대이면 애니메이션이 무한히 재생됩니다.
animation-direction
: 주로 애니메이션 재생 방향을 설정하는 데 사용됩니다.animation-iteration-count: infinite | <number> [,infinite | <number>] *</number></number>기본값은 일반이며 루프할 때마다 애니메이션이 앞으로 재생됩니다. 교대로 애니메이션이 앞으로 한 번, 뒤로 한 번 재생됩니다.
animation-play-state
: 주로 애니메이션 재생 상태를 제어하는 데 사용됩니다.animation-direction:normal | alternate [,normal | alternate] *실행이 기본값으로, 일시정지하여 재생을 중지할 수 있습니다.
animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。
animation-fill-mode:none | forwards | backwards | both
默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。
学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。
nbsp;html>
<meta>
<title></title>
<style>
/*元素从左边出现*/
@keyframes bga {
0% {
left: -500px;
}
100% {
left: 0;
}
}
/*元素从下边出来*/
@keyframes bgb {
0% {
top: 350px;
}
100% {
top: 0;
}
}
/*元素从小到大*/
@keyframes bgc {
0% {
transform: scale(0.1);
}
100% {
transform: none;
}
}
/*元素从大到小*/
@keyframes bgd {
0% {
transform: scale(2);
}
100% {
transform: none;
}
}
/*元素旋转并放大*/
@keyframes bge {
0% {
transform: rotate(-360deg) scale(0.1);
}
100% {
transform: none;
}
}
/*选中元素时，隐藏其他元素*/
@keyframes no {
0% {
z-index: 23;
}
100% {
z-index: 23;
}
}
/*兼容webkit浏览器*/
@-webkit-keyframes bga {
0% {
left: -500px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bgb {
0% {
top: 350px;
}
100% {
top: 0;
}
}
@-webkit-keyframes bgc {
0% {
transform: scale(0.1);
}
100% {
transform: none;
}
}
@-webkit-keyframes bgd {
0% {
transform: scale(2);
}
100% {
transform: none;
}
}
@-webkit-keyframes bge {
0% {
transform: rotate(-360deg) scale(0.1);
}
100% {
transform: none;
}
}
@-webkit-keyframes no {
0% {
z-index: 23;
}
100% {
z-index: 23;
}
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
img.bg {
width: 100%;
height: 100%;
position: fixed;
left: 0;
}
.demo p {
position: absolute;
z-index: 9999;
}
a {
display: block;
width: 100px;
height: 100px;
background: rgba(255, 0, 0,.2);
margin-bottom: 15px;
text-decoration: none;
color: #ffffff;
}
#bga:target {
z-index: 100;
-webkit-animation:bga 2s ease;
animation:bga 2s ease;
}
#bgb:target {
z-index: 100;
-webkit-animation:bgb 2s ease;
animation:bgb 2s ease;
}
#bgc:target {
z-index: 100;
-webkit-animation:bgc 2s ease;
animation:bgc 2s ease;
}
#bgd:target {
z-index: 100;
-webkit-animation:bgd 2s ease;
animation:bgd 2s ease;
}
#bge:target {
z-index: 100;
-webkit-animation:bge 2s ease;
animation:bge 2s ease;
}
</style>
<p>
</p><p>
</p>
CSS3动画完。
위 내용은 CSS 애니메이션 구현에 대한 자세한 설명과 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3 미디어에 대해 자세히 알아보기다음 기사：CSS3 미디어에 대해 자세히 알아보기