css3 同时加载两个动画
最近在做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 同时加载两个动画的更多相关文章
- CSS3实现加载中的动画效果
本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- CSS3实现加载数据动画2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现加载数据动画1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...
随机推荐
- Ubuntu 14.04 LTS下安装Google Chrome浏览器
在Ubuntu 14.04下安装Google Chrome浏览器非常简单,只要到Chrome的网站下载Deb安装包并进行安装即可.当然你也可以使用APT软件包管理器来安装Google Chrome浏览 ...
- 项目自动化建构工具gradle 入门3——生一个exe的helloWorld
前两次呢,我们能够用一个外部的jar 来实现输出helloWorld.但问题是我每次都要用java -jar 来执行,这样我们自己玩还可以,让用户玩就不好了.所以我们生成一个exe给他们吧.这次我们仍 ...
- Ioc和Ao使用扩展
一.Bean作用域 spring容器创建的时候,会将所有配置的bean对象创建出来,默认bean都是单例的.代码通过getBean()方法从容器获取指定的bean实例,容器首先会调用Bean类的无参构 ...
- dubbox 增加google-gprc/protobuf支持
好久没写东西了,今年实在太忙,基本都在搞业务开发,晚上来补一篇,作为今年的收官博客.google-rpc 正式发布以来,受到了不少人的关注,这么知名的rpc框架,不集成到dubbox中有点说不过去. ...
- 图解javascript
- CentOS安装Maven
现有的一个项目使用了Maven来管理,源代码放到了Subversion中.虽然Maven管理项目很方便,但是部署起来还是很麻烦的.先要在本地生成项目jar包,上传到服务器,然后再重启服务.如果在服务器 ...
- 常用 Git 命令清单
我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...
- background-size
语法: background-size:length|percentage|cover|contain length:设置背景图像的宽度和高度, 第一个值为宽度,第二个值为高度. 如果只设置一个值,则 ...
- mvn-打jar运行包(含环境变量配置)
前沿条件 maven下载:http://maven.apache.org/download.cgi 配置环境变量 MAVEN_HOME= D:\Softwares\apache-maven-3.2.2 ...
- 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 ...