transition和animation的区别举例说明

好的，transition和animation都是CSS3中用来实现动画效果的属性，它们的区别在于transition是指过渡效果，而animation是指动画效果。

举个例子，比如我们想让一个按钮在鼠标悬停时从原来的灰色变为红色，可以用transition实现，代码如下：

button{
background-color: gray;
transition: background-color 1s;
}
button:hover{
background-color: red;
}

而如果我们想让一个图片动起来，可以用animation实现，代码如下：

img{
animation: move 2s infinite;
}
@keyframes move{
0%{transform: translateX(0);}
50%{transform: translateX(100px);}
100%{transform: translateX(0);}
}

这样图片就会在页面中来回移动，直到页面关闭。希望我的回答能够解决您的问题。