一、transition定义动画过度效果

/*transition:
    第一个参数：过渡效果生效的样式属性，all代表所有属性变化都可以有设置的过度效果
    第二个参数：过渡时间
    第三个参数：过渡效果样式
    （1）linear:匀速
    （2）ease:慢-》快-》慢
    （3）ease-in:慢->快
    （4）ease-out:快->慢
    (5)ease-in-out:慢-》中-》慢
* */
#myImg{ transition: all 1s ease-in-out;}

transition只是设置动画的过度效果，并不能直接产生动画，必须和以下其他的动画效果结合使用才能做出动画效果。

二、制作位置移动动画

<head>
	<meta charset="utf-8" />
	<title>制作位置平移效果</title>
	<style type="text/css">			
		#myImg{
			transition: all 1s ease-in-out;
		}
		#myImg:hover{
			transform: translate(60px,60px);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我们可以看到，鼠标经过图片的时候，图片会经过1秒钟向右向下平移60像素。

三、倾斜动画

<head>
	<meta charset="UTF-8">
	<title>倾斜效果</title>
	<style type="text/css">
		#myImg{ transition: all 2s ease-in-out;}
		#myImg:hover{
			transform: skew(50deg,50deg);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我们可以看到鼠标经过图片的时候，图片经过2秒钟时间沿着 X 和 Y 轴倾斜50度和50度。

四、旋转动画

<head>
	<meta charset="UTF-8">
	<title>旋转效果</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:rotate(360deg);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我们可以看到鼠标经过图片的时候，图片经过1秒钟时间旋转了360度。

五、缩放动画

<head>
	<meta charset="UTF-8">
	<title>缩放动画</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:scale(1.2);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我们可以看到鼠标经过图片的时候，图片经过1秒钟时间放大1.2倍。

六、动画组合应用

<head>
	<meta charset="UTF-8">
	<title>动画组合应用</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:rotate(360deg) scale(1.2);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我们可以将多个动画放在一起组合应用，我们可以看到鼠标经过图片的时候，图片经过1秒钟时间旋转360度，同时并且放大1.2倍。

七、animation制作自定义动画

HTML:

<img id="myImg" src="img/plane.jpg" width="180" />

CSS:

/*定义关键帧*/
@keyframes myKey{
	0%{ width: 180px; top: 0px; left: 0px;
	transform: rotate(0deg);}
	25%{width: 180px; top: 200px; left: 250px;
	transform: rotate(45deg);}
	50%{width: 180px; top: 400px; left: 500px;
	transform: rotate(0deg);}
	75%{width: 180px; top: 200px; left: 750px;
	transform: rotate(-45deg);}
	100%{width: 180px; top: 0px; left: 1000px;
	transform: rotate(0deg);}
}
/*创建自定义动画*/
#myImg{ position: absolute; animation: myKey 5s linear;}

我们可以看到图片会按照定义的关键帧中的5个关键节点，总共历时5秒钟，分别完成位置，旋转角度的变换过程。

技术的发展日新月异，随着时间推移，无法保证本博客所有内容的正确性。如有误导，请大家见谅，欢迎评论区指正！

开源库地址,欢迎点亮:

GitHub： https://github.com/ITMingliang

Gitee：  https://gitee.com/mingliang_it

GitLab：  https://gitlab.com/ITMingliang

建群声明： 本着技术在于分享，方便大家交流学习的初心，特此建立【编程内功修炼交流群】，为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群，也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得！进群方式：扫码关注公众号，后台回复【进群】

五、CSS制作网页动画_缩放动画


阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS