最近在做H5,遇到这样的需求(如题)

先上一部分代码:

.cur .p1d1d4{

  width: 3rem;

  margin: 2rem 5.3rem 0 0;

  -webkit-animation: p1d1d4 1s ease-out;

  animation: p1d1d4 1s ease-out;

}

@keyframes p1d1d4 {

  0% {

    margin: 2rem 10rem 0 0;

  }

  100% {

    margin: 2rem 5.3rem 0 0;

  }

}

@-webkit-keyframes p1d1d4{

  0% {

    margin: 2rem 10rem 0 0;

  }

  100% {

    margin: 2rem 5.3rem 0 0;

  }

正常情况下基本思路是:

监听webkitAnimationEnd动画结束以后再add另一个class

 document.querySelector('.p1d1d4').addEventListener("webkitAnimationEnd",      }) 

这样的话两个 动画连接在一起(自己脑补效果),但是这样做有个问题是如果这个方案是单页面形式的,回到之前页面过后会发现这个页面始终保留在p1d1d4Scale的动画结束效果,如果想再次执行之前的效果的话,可能要把之前的class效果去掉然后再加上

但是我想在一个class中实现这个效果怎么实现呢

pasting

在这里我想到了transition

简单介绍一下这个属性
  这个方法有4个属性

transition-property     指定缓动的属性

transition-duration     缓动的执行时间

transition-timing-function  缓动类型

transition-delay         在指定时间之后执行(延期执行)

说道这里大家应该就懂了

.cur .p1d1d4{
  width: 3rem;
  margin: 2rem 5.3rem 0 0;
  -webkit-animation: p1d1d4 1s ease-out;
  animation: p1d1d4 1s ease-out;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  transition: all 1s ease-out 2s;
  -webkit-transition: all 1s ease-out 2s;
  -moz-transition: all 1s ease-out 2s;
  -o-transition: all 1s ease-out 2s;
  -ms-transition: all 1s ease-out 2s;
}

动画结束之后2秒执行,分享到此结束

从今天起我打算随心一些写博客,可能会基本的分享思路和方案或者技巧,言外之意就是可能会很简短,我上次的随笔 react demo是真东西,可以直接上手项目,全局ES6写法 webpack打包加载  热加载  react-router 总之汇集了一个小的demo,欢迎关注

css3 同时加载两个动画的更多相关文章

  1. CSS3实现加载中的动画效果

    本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...

  2. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  3. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  4. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  5. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  6. CSS3实现加载数据动画2

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

  7. CSS3实现加载数据动画1

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

  8. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  9. EasyUI使用tree方法生成树形结构加载两次的问题

    html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

随机推荐

  1. Ubuntu 14.04 LTS下安装Google Chrome浏览器

    在Ubuntu 14.04下安装Google Chrome浏览器非常简单,只要到Chrome的网站下载Deb安装包并进行安装即可.当然你也可以使用APT软件包管理器来安装Google Chrome浏览 ...

  2. 项目自动化建构工具gradle 入门3——生一个exe的helloWorld

    前两次呢,我们能够用一个外部的jar 来实现输出helloWorld.但问题是我每次都要用java -jar 来执行,这样我们自己玩还可以,让用户玩就不好了.所以我们生成一个exe给他们吧.这次我们仍 ...

  3. Ioc和Ao使用扩展

    一.Bean作用域 spring容器创建的时候,会将所有配置的bean对象创建出来,默认bean都是单例的.代码通过getBean()方法从容器获取指定的bean实例,容器首先会调用Bean类的无参构 ...

  4. dubbox 增加google-gprc/protobuf支持

    好久没写东西了,今年实在太忙,基本都在搞业务开发,晚上来补一篇,作为今年的收官博客.google-rpc 正式发布以来,受到了不少人的关注,这么知名的rpc框架,不集成到dubbox中有点说不过去. ...

  5. 图解javascript

  6. CentOS安装Maven

    现有的一个项目使用了Maven来管理,源代码放到了Subversion中.虽然Maven管理项目很方便,但是部署起来还是很麻烦的.先要在本地生成项目jar包,上传到服务器,然后再重启服务.如果在服务器 ...

  7. 常用 Git 命令清单

    我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...

  8. background-size

    语法: background-size:length|percentage|cover|contain length:设置背景图像的宽度和高度, 第一个值为宽度,第二个值为高度. 如果只设置一个值,则 ...

  9. mvn-打jar运行包(含环境变量配置)

    前沿条件 maven下载:http://maven.apache.org/download.cgi 配置环境变量 MAVEN_HOME= D:\Softwares\apache-maven-3.2.2 ...

  10. Leetcode 18. 4Sum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...