关于CSS中animation属性与transition属性的区别在制作网页的过程，中我们经常会需要制作一些动画效果，其

在制作网页的过程，中我们经常会需要制作一些动画效果，其中常用的就是animation与transition属性,这两种方法又有什么不同呢，让我们来实验一下。

`
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                        .circular{
                                margin-top: 20px;
                                width: 200px;
                                height: 200px;
                                border-radius: 10px;
                                background: red;
                                animation: move 5s;
                        }
                        .circular2{
                                margin-top: 20px;
                                width: 200px;
                                height: 200px;
                                border-radius: 10px;
                                background: red;
                                transition: all 10s;
                        }
                        .circular2:hover{
                                background: yellow;
                                margin-left: 600px;
                        }
                        @keyframes move{
                                        0%   {background:red;margin-left: 0;}
                                        25%  {background:blue;}
                                        50%  {background:green;margin-left: 600px;}
                                        75% {background:black;}
                                        100% {background:red;margin-left: 0;}					
                        }	


                </style>
        </head>
        <body>
                <div class="circular">			
                </div>
                <br />
                <div class="circular2">
                </div>

        </body>
</html>

通过上面的这段代码可以看到

transition的变化过程只有两个状态，开始和结束，而在animation中，则可以通过百分比控制他的多个状态，transition的变化需要使用：hover等方式才能触发，而animation则可以在页面加载后自动触发。animation还可以定义速度曲线，延迟以及播放次数等，相比较transiton而言animation可以让我们制作出的页面动画变得更有趣，同时也更复杂一些，所以个人认为在简单的时候使用transiton属性，面对复杂或者自由的情况，可以使用animation属性。

不论是transtion还是animation都有他们的可取之处，具体情况还需要按照个人去需求选择,最后放上一个有趣的动画效果作为结尾。

演示.gif

代码

   <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*,
			::before,
			::after {
			  box-sizing: border-box;
			  margin: 0;
			  padding: 0;
			}
			
			body {
			  background: #f1f1f1;
			  height: 80vh;
			  font-family: Abril Fatface;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}
			.title {
			  position: relative;
			}
			.title span {
			  color: orangered;
			  font-size: 150px;
			  transition: 0.5s;
			  font-weight: 100;
			  will-change: transform;
			  display: inline-block;
			}
			
			.s1 span {
			  transform-origin: bottom;
			}
			.s2 span {
			  transform-origin: top;
			  transform: translateY(100%) rotateX(-90deg);
			}
			.s2 {
			  position: absolute;
			  top: 0;
			  left: 0;
			}
			
			.title:hover .s1 span {
			  transform: translateY(-100%) rotateX(-90deg);
			}
			.title:hover .s2 span {
			  transform: translateY(0%) rotateX(0deg);
			}
		</style>
	</head>
	<body>
		    <h1 class="title">
		      <div class="span-container s1">
		        <span>HELLO&nbsp;&nbsp;WORLD</span>
		      </div>
		      <div class="span-container s2">
		        <span>HELLO&nbsp;&nbsp;WORLD</span>
		      </div>
		    </h1>
	</body>
	<script>
		const spanContainers = document.querySelectorAll('.title div');
		
		spanContainers.forEach(item => {
		
		    const letters = item.children[0].textContent.split('');
		    item.innerHTML = "";
		
		    letters.forEach((el, index) => {
		        item.innerHTML += `<span style="transition-delay: ${0.07 * index}s">${el}</span>`
		    })
		})
	</script>
</html>