<!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. 配置vmWare10(桥接模式)，使得虚拟机成为网络中的一台独立的主机

    受到启发的原文:https://www.cnblogs.com/liongis/p/3265458.html 第一步:配置虚拟网络 第二步:配置桥接(VMnet0) 第三步:给虚拟机配置桥接模式 第四 ...

  2. JSF - Access Managed-Bean in a servlet

    When you have to access your Managed Bean in a servlet, it depends on the scope you set for the Bean ...

  3. Linux学习---linux的svn的配置与安装

    1.检查是否已安装 rpm -qa subversion 如果要卸载旧版本: yum remove subversion 2.安装 yum install subversion   3.检查是否安装成 ...

  4. Redis 授权操作

    [Redis 授权操作] AUTH password 通过设置配置文件中 requirepass 项的值(使用命令 CONFIG SET requirepass password ),可以使用密码来保 ...

  5. python之daemon线程

    [python之daemon线程] A thread can be flagged as a “daemon thread”. The significance of this flag is tha ...

  6. 介绍MVC编程架构模式

    MVC(Model/View/Controller)模式是国外用得比较多的一种框架模式,最早是在Smaltalk中出现.MVC包括三类对象. Model——是应用对象 View——是它在屏幕上的表示 ...

  7. Spring中的AOP（五）——定义切入点和切入点指示符

    定义切入点 在前文(点击查看)中使用到的AdviceTest类中同一个切点(即* com.abc.service.*.advice*(..)匹配的连接点)却重复定义了多次,这显然不符合软件设计的原则, ...

  8. static变量和static函数

    在C语言编程中,static的一个作用是信息屏蔽! 比方说,你自己定义了一个文件 -- 该文件中有一系列的函数以及变量的声明和定义! 你希望该文件中的一些函数和变量只能被该文件中的函数使用,那么,你可 ...

  9. Shiro和Spring 集合实现同一个账号只能一个人在线使用，其它人在使用进行剔除（八）

    1.实现原理其实就是自定义过滤器,然后登录时,A登录系统后,B也登录了,这个时候获取此账号之前的session给删除,然后将新的session放入到缓存里面去,一个账户对应一个有序的集合 编写自定义过 ...

  10. android textview 显示一行，且超出自动截断，显示"..."

    android textview 显示一行,且超出自动截断,显示"..." <TextView android:layout_width="wrap_content ...