CSS3-애니메이션 효과 구현-CSS 튜토리얼-php.cn

CSS3-애니메이션 효과 구현

青灯夜游

풀어 주다： 2018-09-12 18:05:07

원래의

2379명이 탐색했습니다.

이 장에서는 CSS3 애니메이션 효과의 구현을 소개하여 간단한 CSS3 애니메이션이 어떻게 구현되는지 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css3-animation:

에는 다음 속성이 있습니다.

1, animation-name 사용자 정의 애니메이션 이름
2, animation-duration 애니메이션은 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정하며 기본값은 다음과 같습니다. 0;
3. animation-timing-function 애니메이션의 시간 곡선은 선형이며 처음에는 느리다가 빠르다가 끝나기 전에 느려집니다.
4. animation-delay는 애니메이션이 시작되기 전의 지연 간격입니다.
5. animation-iteration-count. 애니메이션이 재생되는 횟수는 1입니다.
6. 애니메이션을 역순으로 재생할지 여부
7. animation- play-state 애니메이션이 실행 중인지 일시 중지되었는지 여부입니다. 값: 일시 중지됨은 일시 중지된 애니메이션을 지정하고, 실행 중은 실행 중인 애니메이션을 지정합니다. 기본값은 다음과 같습니다.

코드 예(애니메이션의 전체 과정을 설명하기 위해 번역-번역을 예로 사용):

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.warp {
				height: 100px;
				width: 100px;
				border: 1px solid #eee;
				background-color: #21B4BB;
				animation-name: moves;
				animation-direction: alternate;
				animation-delay: 0.2s;
				animation-duration: 5s;
				animation-play-state: paused;
				animation-iteration-count: 3;
				/*以上可以简写成：*/
				animation: moves 5s linear 0.2s 3;
			}
			
			@keyframes moves {
				/*动画名称自定义*/
				10% {
					background-color: #21B4BB;
					/*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
					transform: translate(100px, 0);
					-ms-transform: translate(100px, 0);
					/*IE 9*/
					-moz-transform: translate(100px, 0);
					/* Firefox */
					-webkit-transform: translate(100px, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 0);
					/* Opera */
				}
				30% {
					background-color: #008000;
					/*时间点可以任意*/
					transform: translate(100px, 100px);
					-ms-transform: translate(100px, 100px);
					/*IE 9*/
					-moz-transform: translate(100px, 100px);
					/* Firefox */
					-webkit-transform: translate(100px, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 100px);
					/* Opera */
				}
				60% {
					background-color: #444444;
					/*时间点可以任意*/
					transform: translate(0, 100px);
					-ms-transform: translate(0, 100px);
					/*IE 9*/
					-moz-transform: translate(0, 100px);
					/* Firefox */
					-webkit-transform: translate(0, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 100px);
					/* Opera */
				}
				100% {
					background-color: #70DBDB;
					/*时间点可以任意*/
					transform: translate(0, 0);
					-ms-transform: translate(0, 0);
					/*IE 9*/
					-moz-transform: translate(0, 0);
					/* Firefox */
					-webkit-transform: translate(0, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 0);
					/* Opera */
				}
			}
		</style>
	</head>

	<body>
		<div class="warp">

		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS3-애니메이션 효과 구현