网页|CSS的动画实现

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

一些CSS属性是可以实现动画效果，即我们可以用CSS实现动画和过渡。而动画属性的实现其实就是，属性逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色，也就是通过设置多个节点来精确控制一个，或一组动画，常用来实现复杂的动画效果从而实现动画。动画是CSS最具有颠覆性的特征之一，接下来我们就来感受一下CSS的动画吧。

解决方案

1、方法：

1）定义动画：用keyfames定义动画（类似定义类选择器）。

@keyframes 动画名称{

                0%{

                    width:0px;

                }

                100%{

                    width:1200px;

                }

          }

2）使用（调用）动画

在此处我们设计一个盒子，当我们打开网页时它可以从左边跑到右边。