CSS动画与翻转效果-优快云博客

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/100524350

翻转（backface-visibility: hidden;）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s; 
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden;  /*不是正面对象屏幕就隐藏*/
		}
		div:hover img {
 			transform: rotateY(180deg);
		}

	</style>
</head>
<body>
	<div>
		<img src="ad-l.png" alt="">
		<img src="ad-r.png" alt=""> 
	</div>
</body>
</html>

动画animation

语法格式：
animation: 动画名称动画时间运动曲线何时开始播放次数是否反方向；

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function	规定动画的速度曲线。默认是"ease"
animation-delay	规定动画何时开始。默认是0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一周期逆向地播放。默认是"normal"
animation-play-state	规定动画是否正在运行或暂停。默认是"running"
animation-fill-mode	规定对象动画时间之外的状态

关于几个值，除了名字，动画时间，延时有严格顺序要求其他随意

animation-direction
默认值为nomal：正常放向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行在正方向运行，并持续交替运行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: blue;
			animation: do 2s ease infinite reverse altnate;   /*引用动画*/
			/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；*/
			/*动画名称是自定义的 do*/
			/*infinite  无限循环*/
			/*一般情况下，我们就用前两个animation: do 2s;*/
			
		}	
		/*@keyframes 动画名称{} 定义动画*/
		@keyframes do {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(600px);
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: blue;
			animation: do 2s infinite;   /*引用动画*/	
			/*animation: do 2s ease infinite reverse altnate;*/   /*引用动画*/
			/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；*/
			/*动画名称是自定义的 do*/
			/*infinite  无限循环*/
			/*一般情况下，我们就用前两个animation: do 2s;*/

		}	
		/*@keyframes 动画名称{} 定义动画*/
		@keyframes do {
			0% {  /*起始位置  等价于刚才的from*/
				transform: translate3d(0, 0, 0); 
			} 
			25% {
				transform: translate3d(800px, 0, 0); 
			}
			50% {
				transform: translate3d(800px, 400px, 0); 
			}
			75% {
				transform: translate3d(0, 400px, 0); 
			}
			100% {
				transform: translate3d(0, 0, 0); 	/*100%相当于解释结束 */
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

car案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img {
			animation: car 5s infinite;  /*引用动画*/
			animation-iteration-count: infinite;  /*单写也可以*/
		}
		/*定义动画*/
		@keyframes car {
			0% {
				transform: translate3d(0, 0, 0);
			}
			50% {
				transform: translate3d(1000PX, 0, 0);
			}
			51% {  /* 翻转图片 让车掉头*/
				transform: translate3d(1000px, 0, 0) rotateY(180deg);
				/*如果有多组变形 都属于 transform 那我们用空格隔开即可*/
			} 
			100% {
				transform: translate3d(0, 0, 0) rotateY(180deg);
			} 
		}
	</style>
</head>
<body>
	<img src="car.png" width="100" alt="">
</body>
</html>