<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <style media="screen">

     .basic{

       background-color: red;

       /* width: 300px;

       height: 300px; */

     }

     @keyframes animate1

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-moz-keyframes animate1 /* Firefox */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-webkit-keyframes animate1 /* Safari 和 Chrome */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-o-keyframes animate1 /* Opera */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   .animate2 {

   animation: animate1 5s;

   -moz-animation: animate1 5s;    /* Firefox */

   -webkit-animation: animate1 5s;    /* Safari 和 Chrome */

   -o-animation: animate1 5s;    /* Opera */

   }

   </style>

 </head>

 <body>

   <div class="basic" id="div1">

     hello world.

   </div>

   <button type="button" name="button">点击应用动画</button>

   <script type="text/javascript">

     const btn = document.getElementsByName('button')[0];

     const div = document.getElementById("div1");

     btn.addEventListener('click', ()=>{

       console.log("点击按钮。。。");

       if(div.classList.contains("basic")){

         div.classList.remove("basic");

       }

       div.classList.add("animate2");

     });

   </script>

 </body>

 </html>

1. 使用@keyframes定义一个动画效果。

 @keyframes animate1

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-moz-keyframes animate1 /* Firefox */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-webkit-keyframes animate1 /* Safari 和 Chrome */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

   @-o-keyframes animate1 /* Opera */

   {

   0%   {background: red;}

   25%  {background: yellow;}

   50%  {background: blue;}

   100% {background: green;}

   }

2.将动画效果先绑定到css类上。

 .animate2 {

   animation: animate1 5s;

   -moz-animation: animate1 5s;    /* Firefox */

   -webkit-animation: animate1 5s;    /* Safari 和 Chrome */

   -o-animation: animate1 5s;    /* Opera */

   }

3.将动画效果应用到指定的元素上。

const btn = document.getElementsByName('button')[0];

    const div = document.getElementById("div1");

    btn.addEventListener('click', ()=>{

      console.log("点击按钮。。。");

      if(div.classList.contains("basic")){

        div.classList.remove("basic");

      }

      div.classList.add("animate2");

    });

当点击按钮时，就会将定义的动画效果应用到div上。

css3 animation动画使用的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. lombok 的使用

    参考:https://blog.csdn.net/motui/article/details/79012846

  2. forbidden Derby database starting with weblogic instance

    Now doing a new project  which  choose the newest weblogic 12.1.2.0.0 as web container.But found the ...

  3. MVC-READ2

    框架设计模式 契约式设计.元编程.元数据驱动设计.管道模型.远程代理模式.提供程序模型:

  4. C# 6.0可能的新特性及C#发展历程[转]

      C# 6.0可能的新特性及C#发展历程[转] 年10月份发布了,对应的是.Net Franework 4.5.1. 或者3年,更新增加的东西会比较多,所以对于C# 6.0,还是有一些期待的. 下面 ...

  5. php 共享内存学习(ＡＰＣ扩展)

    问题:希望可以在进程间共享变量,为共享数据提供快速访问 解决方案:使用APC扩展的数据存储功能 (cli模式下没有作用) //获取原来的值 $population = apc_fetch('popul ...

  6. How To Check Member In Window VS With CplusPlus?

    实例说明 下面这个实例代码, 快速举例了在Win32应用程序下,对于内存的泄漏检查. 其中的原理,目前本人还是不太的理解. 只是记录了使用方法. 以后,看情况,会更新的. #ifdef _WIN32 ...

  7. pyspider示例代码一：利用phantomjs解决js问题

    本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下 ...

  8. Jenkins执行selenium报错unknown error: cannot find Chrome binary

    问题描述:在Pycharm中执行selenium测试用例,可以正常运行, 集成在Jenkins中,构建时,发现构建成功,但是查看Console Output,报错:unknown error: can ...

  9. Oracle学习笔记(十二)

    十三.存储过程和存储函数1.掌握存储过程(相当于建立一个函数或者方法体,然后通过外部对其调用) 指存储在数据库中供所有程序调用的子程序叫做存储过程或存储函数. 相同点: 完成特定功能的程序 区别: 是 ...

  10. 我的border能自定义四角之border-radius : 左上角，右上角，左下角，右下角。

    1 边框:border: 1px solid #0081df; 2 想要单独加上四个圆角: border-bottom-left-radius: 5px; border-top-left-radius ...