现在越来越多的网站都在使用动画，无论是GIF、SVG、WebGL、背景视频等形式。如果使用得当，网络上的动画会带来生命力和交互性，添加为用户提供额外的反馈和体验。在本教程中，我将向您介绍CSS动画；一种越来越受浏览器支持欢迎的高效做事方式。以下示例涵盖了基础知识：方形元素变形为圆形。效果是https://codepen.io/mengmengpr...高级选项Envato市场上的设计师一直忙于创建一系列CSS动画，从阴影到丝带、滑块等等。您可以将它们插入您的网站。您还可以聘请EnvatoStudio的CSS专家来帮助您为您的项目提供更丰富的自定义。@keyframes和AnimationCSS动画的主要组成部分是@keyframes，即创建动画的CSS规则。将@keyframes视为时间轴上的阶段。在@keyframes中，您定义了这些阶段，每个阶段都有不同的样式声明。接下来，要使CSS动画起作用，您需要将@keyframes绑定到选择器。这将遍历@keyframes声明中的所有代码，并根据阶段将初始样式更改为新样式。@keyframes接下来我们将设置动画阶段。@keyframes的属性是：我们选择的名称（这里是tutsFade）。阶段：0%-100%或从（0%）到（100%）。css样式：我们将要应用到每个阶段的样式。示例：@keyframestutsFade{0%{不透明度：1；}100%{不透明度：0;}}/*----或----*/@keyframestutsFade{from{opacity:1;}至{不透明度：0；}}/*----简写----*/@keyframestutsFade{to{opacity:0;}}上面的代码将实现一个元素的不透明度的转换，从opacity:1到opacity:0。上述每种方法都将达到相同的结果。@Animation动画属性用于调用CSS选择器中的@keyframes。动画可以有很多属性：animation-name:@keyframesname（这里是tutsFade）。animation-duration：动画持续时间。animation-timing-function：设置动画的速度（linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier）。animation-delay：动画开始前的延迟。animation-iteration-count：动画循环次数。animation-direction：定义动画是否依次反向播放。如果animation-direction值为“alternate”，则动画将在奇数次正常播放，偶数次反向播放。animation-fill-mode：指定当我们的动画完成时将哪些样式应用于元素。示例：.element{动画名称：tutsFade；动画持续时间：4s；动画延迟：1s；动画迭代计数：无限；动画计时函数：线性；animation-direction:alternate;}/*----shorthand----*/.element{animation:tutsFade4s1sinfinitelinearalternate;}添加不同浏览器支持的前缀我们需要使用浏览器特定的前缀来确保最佳浏览器支持。标准前缀是：Chrome&Safari:-webkit-Firefox:-moz-Opera:-o-IE:-ms-上面的例子会变成：.element{-webkit-animation:tutsFade4s1sinfinitelinearalternate;-moz-动画：tutsFade4s1s无限线性交替；-ms-animation:tutsFade4s1s无限线性交替；-o-动画：tutsFade4s1s无限线性交替；animation:tutsFade4s1sinfinitelinearalternate;}@-webkit-keyframestutsFade{/*你的风格*/}@-moz-keyframestutsFade{/*你的风格*/}@-ms-keyframestutsFade{/*你的风格*/}@-o-keyframestutsFade{/*你的风格*/}@keyframestutsFade{/*你的风格*/}为了本教程的可读性，不会使用前缀，但最终版本会包含它们，我鼓励您在CSS代码中使用前缀。要了解有关浏览器前缀的更多信息，您可以查看http://css3please.com/。多个动画您可以使用逗号分隔符添加多个动画。假设我们要给元素添加一个旋转，我们需要声明额外的@keyframes，然后绑定到我们的元素：.element{animation:tutsFade4s1sinfinitelinearalternate,tutsRotate4s1sinfinitelinearalternate;}@keyframestutsFade{到{不透明度：0;}}@keyframestutsRotate{到{变换：旋转（180度）；}}方形到圆形的转换接下来我们将创建一个简单的形状转换；使用上述原则逐步将正方形变成圆形。我们有五个阶段，在每个阶段，我们定义元素的边框半径、旋转和不同的背景颜色。基本元素首先，我们创建一个要设置动画的html元素。
接下来，给div添加默认样式：div{width:200px;高度：200px；边距：50px；background-color:coral;}定义关键帧现在，让我们创建一个五阶段的@keyframes:@keyframessquare-to-circle{0%{border-radius:0000;背景：珊瑚；变换：旋转（0度）；}25%{边界半径：50%000；背景：黑鲑鱼；变换：旋转（45度）；}50%{边界半径：50%50%00;背景：印度红；变换：旋转（90度）；}75%{边界半径：50%50%50%0;背景：浅珊瑚色；变换：旋转（135度）；}100%{边界半径：50%；背景：黑鲑鱼；变换：旋转（180度）；}}应用动画定义了方形到圆形的动画后，我们还需要将动画应用到div：div{width:200px;高度：200px；背景色：珊瑚色；animation:square-to-circle2s1sinfinitealternate;}现在动画状态为：动画名称为square-to-circle。动画持续时间为2s。动画延迟为1s。动画循环次数是无限的，所以它会无限循环。动画循环方向是交替的，会从头到尾，然后反转，再从头到尾。使用animation-timing-function我们可以添加到动画属性的最后一个值是动画计时函数。这将定义我们运动的速度、加速度和减速度。这个属性可以是一个非常详细的值（需要笨拙的手动计算），但是有很多免费网站提供资源的实时定制和动态计时功能。一个相关的工具是CSSEasingAnimationTool，它可以用来计算animation-timing-function。通过工具中的计算，使用animation-cubic-bezier为我们的动画添加弹性效果。最终代码如下：div{width:200px;高度：200px；边距：50px；背景色：珊瑚色；动画：方形到圆形2s1s无限立方贝塞尔(1,.015,.295,1.225)交替；最后一步我们的动画在现代浏览器中都可以完美运行，但是Firefox在动画渲染方面很差，在旋转过程中出现锯齿状边缘。我们可以通过添加轮廓样式来改进它：outline:1pxsolidtransparent;最近，我们发现了很多高质量的国外文章。翻译是一个学习和分享的过程。喜欢就点个赞吧。