transition属性可以让元素在状态变化过程中平滑地过渡，比如当鼠标悬浮在一个按钮上时，大家可以添加transition属性让按钮从原本的背景色平滑地变成不同的颜色，这样过度的效果让用户感到非常流畅和自然。
下面是一个简单的例子：
button {
background-color: #ff9999;
transition: background-color 1s;
}
button:hover {
background-color: #99ccff;
}这段CSS代码实现了一个简单的按钮颜色变化效果，当鼠标移动到按钮上时，按钮的背景色变成了蓝色，过程时间是1秒钟。这样过渡的效果会使整个按钮颜色变化看起来非常平滑、有条理。
animation属性是通过关键帧控制让元素从一种状态平滑过渡到另一种状态，过程中可以定义很多不同的细节，比如更改透明度、大小、位移等等。下面是一个简单的例子：
.div-class {
width: 100px;
height: 100px;
animation: my-move 1s ease-in-out;
}
@keyframes my-move {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}这段CSS代码实现了一个DIV元素从左侧移动进入屏幕的效果，为了达到这个效果，大家定义了一个名为my-move的关键帧，设定了元素的起始状态和结束状态，通过animation属性来对其进行控制。此时元素的透明度是0，同时横向位移-100px，接着过程时间以及动画可以变得更加复杂，过程随后以透明度1和0位移为0的位置。
以上就是CSS动画片的转场实现介绍。