Home >Web Front-end >CSS Tutorial >css3-implementation of animation effect

css3-implementation of animation effect

青灯夜游Original: 2018-09-12 18:05:072361browse

This chapter will introduce you to the implementation of css3-animation effect, so that you can understand how a simple css3 animation is implemented. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css3-animation:

has the following attributes:

1, animation-name Custom animation name
2. animation-duration specifies how many seconds or milliseconds it takes to complete the animation. The default value is 0;
3. animation-timing-function is the time curve of the animation, linear at a constant speed, ease at first slow and then fast, and then slow down before the end. .
4. animation-delay is the delay interval before starting the animation. The default is 0
5. animation-iteration-count. The number of times the animation is played. The default is 1
6. animation-direction. Whether to play in reverse in turn. Animation
7, animation-play-state Whether the animation is running or paused. Value: paused specifies a paused animation; running specifies a running animation, default.

Code example (take translation--translate as an example to illustrate the entire animation process):

<!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>

Rendering:

css3-implementation of animation effect

The above is the detailed content of css3-implementation of animation effect. For more information, please follow other related articles on the PHP Chinese website!

css3 count function animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are web standards? ?Next article：What are web standards? ?

See more

css3-implementation of animation effect

Related articles