<!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. WordPress部署

    WordPress部署 WordPress是一个门户.博客网站的制作工具,php开发,自带后台,可以很简便的安装主题,还拥有一个庞大的主题网站生态. 软件下载:https://cn.wordpress ...

  2. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  3. Ubuntu下用devstack单节点部署Openstack

    一.实验环境 本实验是在Vmware Workstation下创建的单台Ubuntu服务器版系统中,利用devstack部署的Openstack Pike版. 宿主机:win10 1803  8G内存 ...

  4. JAVA - 守护线程(Daemon Thread)

    转载自:http://www.cnblogs.com/luochengor/archive/2011/08/11/2134818.html 在Java中有两类线程:用户线程 (User Thread) ...

  5. 邮槽 匿名管道 命名管道 剪贴板 进程通讯 转自http://www.cnblogs.com/kzloser/archive/2012/11/04/2753367.html#

    邮槽 通信流程: 服务器 客户端 注意: 邮槽是基于广播通信体系设计出来的,它采用无连接的不可靠的数据传输 邮槽可以实现一对多的单向通信,我们可以利用这个特点编写一个网络会议通知系统,而且实现这一的系 ...

  6. ManualResetEvent,AutoResetEvent说明

    相信不少人对ManualResetEvent,AutoResetEvent的状态比较晕,下面是本人认为最精简的理解 1.只有2种状态,终止态 And 非终止态 终止状态,既然是状态那么一定对应事物,这 ...

  7. SpringMVC源码解析 - HandlerAdater - ModelAndViewContainer上下文容器

    HandlerAdapter在处理请求时上下文数据的传递工作是由ModelAndViewContainer负责的. 源码注释是这样描述的: Records model and view related ...

  8. linux每天一小步---cat命令详解

    1 命令功能 cat命令是linux系统下的一个文本输出命令,通常用于查看文件的内容. 2 命令语法 cat  [选项参数]  文件名 3 命令参数 -n  由1开始对所有输出的内容行数编号 -b   ...

  9. linux每天一小步---cd命令详解

    1 命令功能: 该命令用于目录间的相互切换,cd是change directory的 缩写 2 命令语法:     cd  [目录名] 3 使用范例: 使用cd命令从当前用户的家目录切换到系统的根目录 ...

  10. Synchronizer解析(为AQS打个铺垫)

    ReentranceLock 和 Semaphore有很多共同点,他们都像是一个gate一样, 来控制让哪些线程阻塞,让哪些线程通过. 不同的是,ReentranceLock允许通过的量是1,Sema ...