一、CSS动画的基础
CSS动画是指通过CSS样式来动态改变HTML元素的效果，实现动态的页面交互效果。CSS动画具有跨浏览器兼容性好、操作简单灵活等特点，是前端开发中常用的动画实现方式之一。
CSS3中新增了一系列的动画属性和关键帧规则，其中包含了一些可以制作2D、3D动画的属性。通过这些属性，我们可以实现各种各样的视觉效果，包括但不限于移动、旋转、缩放等。
在CSS中定义动画有两种方式，一种是利用关键帧(@keyframes)实现，另一种是使用过渡(transition)实现，本篇文章将主要介绍前者。
二、关键帧动画示例
使用关键帧动画来实现图片移动的效果，可以考虑如下示例：
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background: #f1f1f1;
}
.box img {
position: absolute;
top: 0;
left: 0;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
</style>
<div class="box">
<img src="https://picsum.photos/id/1015/200/200" width="200" height="200"/>
</div>上述代码中，我们定义了一个名为“move”的关键帧动画，它的实现原理是：从初始位置（left: 0）到移动到屏幕中央（left: 50%），再到最终位置（left: 100%）。动画重复执行（animation-iteration-count）且往返反复地执行（animation-timing-function: ease-in-out）。
动画效果如下所示：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/294118.html
微信扫一扫 
支付宝扫一扫 