【CSS】animation动画-奔跑的小车


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animationtitle>
	<style type="text/css">
		div {
			border: 1px solid #ccc;
			padding: 20px;
		}

		.animation:hover {
			animation-name: goback;
			animation-duration: 5s;
			animation-delay: 0s;
		}

		@keyframes goback {
			0% {

			}
			50% {
				transform: translateX(500px);
			}
			55% {
				transform: translateX(500px) rotateY(180deg);
			}
			95% {
				transform: translateX(0) rotateY(180deg);
			}
			100% {
				transform: translateX(0);
			}
		}
	style>
head>
<body>
	<div>
		<img src="../img/animation-car.jpg" width="100" class="animation">
	div>
body>
html>

效果如下:
【CSS】animation动画-奔跑的小车_第1张图片

你可能感兴趣的:(css)