이 글에서는 프레임별 애니메이션 효과 예시를 구현하기 위해 CSS3 애니메이션을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
css3의 애니메이션 속성은 매우 강력하지만 거의 사용하지 않는데, 최근 인터뷰에서 우연히 질문을 받았는데, 지금 시간이 있을 때 애니메이션에 대해 간략하게 요약하겠습니다. 동시에 프레임별 애니메이션 데모를 연습으로 구현합니다
애니메이션 속성 목록
애니메이션 속성이 많기 때문에 w3c에서 보기엔 좀 아쉬워서 그냥 지도로 했는데요, 나중에 확인하고 싶으시면 잘 보이실 겁니다
애니메이션을 사용하세요. 프레임별 애니메이션을 구현하려면
애니메이션의 속성을 숙지한 후 구현할 간단한 작은 프로젝트를 찾아야 합니다. 먼저 나 자신을 만족시키세요
아이디어는 매우 간단합니다. 요소에 스프라이트 배경을 제공한 다음 프레임 애니메이션을 추가하여 배경 위치를 변경하는 것입니다. 키 코드:
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
p{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
} 
그런데 실행해 보니 애니메이션의 각 프레임 사이에서 프레임 애니메이션이 미끄러지는 것을 발견했는데, 이는 우리가 원하는 효과가 아닙니다. 왜일까요?
기본적으로 애니메이션은 각 키 프레임 사이에 트윈 애니메이션을 삽입하는이지 모드로 전환되므로 애니메이션 효과가 일관됩니다.
이유를 알면 해결 방법은 간단합니다.
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}
1단계: 작업 사이에 8프레임 유지, 작업 1을 0%로 설정, 작업 1을 8%로 종료
단계 2: 작업 간 전환 1.2프레임, 9.2% 액션 2를 설정하고 액션 2는 17.2%로 끝납니다
전체 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
p{
width:140px;
height:140px;
background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
프레임 사이에 steps()를 사용하는 또 다른 구현 방법이 있습니다. Step 애니메이션, 이것은 w3c에 작성되지 않았습니다. 먼저 사진을 게시하십시오
위 그림에서 볼 수 있듯이:
steps(1,start) : 애니메이션 1 이 프레임의 처음부터 끝까지(전체 주기가 아님) 100%로 점프
steps(1,end): 이 프레임이 끝날 때까지(전체 주기가 아님) 0% 스타일을 유지
또한 애니메이션 타이밍 기능을 직접 설정할 수도 있습니다: step-start/step-end
step-start 효과는 steps(1,start)와 동일하고, step-end 효과는 steps(1)과 동일합니다. ,end)
마지막 효과는 녹음 문제가 조금 느릴 수 있으니 관심 있는 학생들은 직접 코드를 복사해서 실행해보세요:
전체 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
p{
width:140px;
height:140px;
background: url(754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<p></p>
</body>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 또한 PHP 중국어 웹사이트를 지원해 주시기 바랍니다.
위 내용은 CSS3 애니메이션은 프레임별 애니메이션 효과 예제 소개를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?
@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.
빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AMCSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다
CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다
Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다
취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다
CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서
NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Dreamweaver Mac版
시각적 웹 개발 도구
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
WebStorm Mac 버전
유용한 JavaScript 개발 도구
