css怎么实现动画

这篇文章主要讲解了“css怎么实现动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现动画”吧！

站在用户的角度思考问题，与客户深入沟通，找到离石网站设计与离石网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖离石地区。

css怎么实现动画

随着业务对前端的需求越来越多，作为前端三大法宝之一的css也越变越复杂。给初学的同学们带来了一定的压力。css具体到每一个属性也都没有多复杂，主要问题在于知识点比较多。好不容易把主要知识点学完了，一看网上的题，或者是一看大师们写的css的书，又被淹没到新的海洋中。

其实人类的大脑不善于记忆零散的知识点，但是如果有一条逻辑线能够将这些知识串联起来，就能大大方便大脑的记忆和搜索。这个线索要有逻辑，最好还有趣。

刚好，css的动画就是这样一条有趣的线索，可以在动画的变化中理解css属性。

CSS动画快速扫盲

在串起其它属性之前，我们先理解下动画。

动画的核心关键词在于“动”。我们要回答几个问题:

What: 什么东西动？
Where: 往哪里动？
When: 什么时候动？动多久？
How: 怎么动？
How much: 动多少次？

这些问题的结果，就构成了一个动画的构成要素。

首先是动的主体是什么？就是我们的HTML标签，或者是标签构成的复杂组件之类的。对我们来说，主要就是

和. 第二，往哪里动？这就是要变化的css属性。这也是我们想用来串起来的css的知识点。第三，什么时候动？我们需要指定动画的时长，起始的时机等等。这是纯动画的技术属性。第四，怎么动？是匀速动，还是加速动，还是先加速再减速，还是要搞个贝塞尔曲线之类的，这也是动画的技术属性。第五，动多少次？是一次，还是多次，还是一直动下去？这也是纯动画的技术属性。

transition动画

我们先学习一个简单的css属性动画，叫做transition。它就是由上面的4个属性组成的：

transition-property: 指定要变的css属性值
transition-duration: 动画时长
transition-timing-function: 动画的快慢变化
transition-delay: 动画起始的延迟时间

我们来看个例子：

        #hellocss {
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

这个动画指定的意思是说，如果宽度width变化了，则延迟一秒运行5秒宽度变化的动画。变化速度是匀速的。

为了看得清楚，我们设一个初始的width，再加上一个背景色和前景色：

既然是动画，那么要有变化。于是我们写两句javascript：

然后找个事件来触发这个变化，比如我们在页面加载时来做：

  
    Hello,HTML
    Hello,CSS

完整的代码如下：



  
    
    
  
  
    Hello,HTML
    Hello,CSS

如果没有延时，第4项可以不写。如果采用先慢后快的ease方式，第3项也可以省略。如果第一项是什么变都动，可以写成all。但是第二项动画时长不能不写，不写默认是0秒，就啥也没有了。

所有的可以线性计算的属性都可以用来进行动画。除了宽、高、位置等容易理解的坐标属性，颜色属性也是经常被用来做动画的好场景。

Hello,HTML

Hello,CSS

@keyframes color_change{ from { background-color: blue; color: yellow; } to { background-color: white; color: black; } }

#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; }

#hellocss { animation-name: color_change; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 3; }

Hello,HTML

Hello,CSS

@keyframes color_change { 0% { background-color: blue; color: yellow; } 100% { background-color: white; color: black; } }

@keyframes color_change { 0% { background-color: blue; color: yellow; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: white; color: black; } }

Hello,HTML Hello,CSS

@keyframes color_change { 0% { background-color: blue; color: yellow; border-radius: 0px; } 50% { background-color: yellowgreen; color: red; } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; } }

0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px) } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px) } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px) } }

@keyframes color_change{ 0% { background-color: blue; color: yellow; border-radius: 0px; transform:translate(0px,0px); transform:rotate(0deg); } 50% { background-color: yellowgreen; color: red; transform:translate(0px,100px); transform:rotate(90deg); } 100% { background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate(100px,100px); transform:rotate(180deg); } }

Hello Box

border-width: 5px; border-top-color: #f5222d; border-bottom-color: #cf1322; border-left-color: #a8071a; border-right-color: #820014; padding: 10px; margin: 15px;

Hello Box

大橙子网站建设，新征程启航

css怎么实现动画

CSS动画快速扫盲

通过动画形象理解css属性

变形 - 圆角矩形

通过动画学习盒子模型

其他资讯