css动画播放 |css3 图片荡秋千

/*关键帧动画*/
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
/*过渡动画*/
.transition {
transition: all 2s ease-in-out;
}
.transition:hover {
background-color: red;
}

关键帧动画是一种通过定义一系列关键帧来实现动画效果的方式。在上面的代码中，大家首先定义了一个名为“fade-in”的关键帧动画，从透明度为0开始，逐渐过渡到透明度为1，整个动画持续时间为2秒。接着，在.fade-in类上通过animation-name属性指定使用该关键帧动画，并设置动画持续时间。

另外一种方式是过渡动画，它是通过在CSS规则中定义转换和过渡属性来实现动画效果的。在上面的代码中，大家定义了一个.transition类，设置了当鼠标悬停时背景颜色从原来的颜色平滑过度到红色。通过transition属性设置动画持续时间和动画方式，这里设置的动画持续时间为2秒。

总的来说，CSS动画通过关键帧动画和过渡动画两种方式实现不同的效果展示，合理使用可以为网页增添更多的趣味和吸引力。以上就是实现CSS动画播放效果的一些基础方法，希望对大家有所帮助。