<!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. inotify监测实例

    /************************************************************************* > File Name: inotify.c ...

  2. JS是面向过程、面向对象还是基于对象？面向对象的代码体现

    一.问题 javascript是面向对象的,还是面向过程的?基于对象是什么意思? 对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为(也就是属性和方法),那些拥有这一共同属性和方法 ...

  3. ios 获取当前wifi名称

    ios5之前可以通过读取配置文件获取,ios5以后苹果修改wifi列表文件位置,只有root权限才可以读取. ios4:/System/Library/SystemConfiguration/WiFi ...

  4. vmware虚拟机开机报附件中的错误的解决办法

    Virtualized Inter VT-x/EPT is incompatible with this virtual machine configuration 在没有虚拟化msg.inter.h ...

  5. 去掉redhat linux提示注册

    去掉提示注册的话,卸载几个软件包:#rpm -qa | grep subscription-manager 然后移除那出现的几项吧:#yum remove subscription-manager-g ...

  6. change qt version

    https://blog.csdn.net/xiaoheibaqi/article/details/50777203 右键工程->设置qt project setting -->修改ver ...

  7. Oracle GoldenGate 二、配置和使用

    Oracle GoldenGate 二.配置和使用 配置和使用GoldenGate的步骤 1 在源端和目标端配置数据库支持GoldenGate 2 在源端和目标端创建和配置GoldenGate实例 3 ...

  8. 团队作业7——alpha阶段之事后诸葛亮分析

    事后诸葛亮分析 1. 设想和目标 1.1 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决查询物流信息步骤繁琐的问题.定义还算清楚.典型用户主要针对一些不熟悉淘 ...

  9. mongo学习-group操作以及java代码

    原数据: /* 1 */ { "_id" : ObjectId("552a330e05c27486b9b9b650"), "_class" ...

  10. java 对象直接序列化

    序列化类,加字段后, 使用该类从现有文件反序列化时,以前字段可以正常读出 但是反序列化后,那些未对应字段会被设置成null ,即使在类的定义种已设置了初始值 --------------------- ...