<!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. .net 架构

    .net Webservice 三层架构,BLL(业务逻辑层),DAL(数据访问层)sql语句.MODEL模型层也就是实体层Entity(数据库字段和类的定义的映射). UI层(Web/Form)界面 ...

  2. MySQL函数及用法示例

    (一) 1.字符串函数ascii(str)    返回字符串str的第一个字符的ascii值(str是空串时返回0)   mysql> select ascii('2');   -> 50 ...

  3. vs配置D3D开发环境

    其实很简单直接上图吧: 主要include和lib目录指定: $(DXSDK_DIR)Include $(DXSDK_DIR)Lib\x86 下面是连接器-输入项: 主要包含: dxgi.libdxg ...

  4. 4 MySQL--表（增删改查）

    1.表的介绍 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标题,称为表的字段 id,name,qq,age称为字段,其余的,一行内容称为一条记录 2.创建表: ...

  5. css 积累1

    1.position 取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其实,除此之外, CSS 属性通常还可以设置 ...

  6. 迷你MVVM框架 avalonjs 0.9发布

    本版本最大的改进是引进了ms-with绑定,现在可轻松遍历对象了. 改进列表如下: 重新使用082的scanNodes方法,因为有关旧式IE下UI渲染锁死的问题已经解决了. 优化each绑定与Coll ...

  7. 图片上传 纯js编码

    ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  8. ProjectLeader感悟

    1 首先项目的目标清晰明确,开发的方案也必须清晰明确. 确保两点的做法,是面对面的访谈,很简单的可以打电话或者QQ或者邮件:方案要多次揣摩,设计出合理的方案.如果发以上两点做不好,你就会受到组员的鄙视 ...

  9. 77. Combinations (Recursion)

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  10. learning.py报错

    在廖雪峰大神的网站下学习了Python,其中有一个提供互动环境的Python脚本--learning.py,报了个错,看了下源文件的代码,安排了一下. 报错信息: This learning.py i ...