css复杂动画（animation属性）
1、声明：@keyframes name{ }；
2、涉及到的属性
animation-name：动画名称
animation-duration：单次动画总时长
animation-timing-function：时间函数
animation-delay：播放前延时的时长
animation-iteration-count：播放次数 （特殊值：infinite 循环播放）
animation-direction：播放顺序（normal：正常播放 alternate：轮流反向播放）
3、简写animation: name duration timing-function delay iteration-count direction fill-mode;
4、例子：
<style>
@keyframes cart {
from {
left:;
top:;
border-radius:;
}
20% {
left: 200px;
top: 500px;
transform: rotateZ(720deg);
}
40% {
left: 400px;
top:;
border-radius: 50px;
}
60% {
top: 500px;
left: 600px;
border-radius: 50%;
}
80% {
top: 0px;
left: 800px;
border-radius: 50px;
}
to {
left:;
top:;
}
} .Z {
height: 150px;
width: 150px;
position: relative;
background-color: blue;
animation: cart 10s linear 2s infinite alternate;
transition: all 2s;
} </style>
</head> <body>
<div class="Z"> </div>
得到的效果：
css复杂动画（animation属性）的更多相关文章
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- css简单动画
这几天公司需要更新一个移动端web的页面,因为任务简单,就交给作为菜鸟新人的我来做.第一次接触css还是在14年刚上大一的时候跟着html一起学习的,之后就再也没有接触过.所以只好一边学习,一边完成任 ...
- CSS3之animation属性
CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- CSS3动画属性：动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- CSS3 animation（动画） 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css动画 animation
今天用css做了一个简单的三角上下移动的一个小动画,说白了就是在改变该物体的height值.除了这个方法,还可以用js. 一.在用css写动画时,一定要记住兼容性问题.如何解决该兼容性?在前面加内核前 ...
随机推荐
- readerwriterqueue 一个用 C++ 实现的快速无锁队列
https://www.oschina.net/translate/a-fast-lock-free-queue-for-cpp?cmp&p=2 A single-producer, sing ...
- vue-cli 3x 的使用
当我们使用 npm 下载过文件之后,里面就会有缓存 我们要使用 npm cache clean --force 来清除缓存 创建项目:vue create 文件名 然后:cd 文件名 启动程序:npm ...
- 判断List是否为空的问题
今天公司安排给页面调试Bug,感觉公司人员写的判断判断List是否为空存在一定的问题,公司判断是list!=null这是完全不对的,这只会判断是否有list对象.如果为空,他也会执行if(list!= ...
- windos批处理启动redis与哨兵
为各个启动单独建立脚本后用总的bat调用 创建脚本,redis6379.bat脚本内容:@echo offtitle redis-serverset ENV_HOME6379="G:\Red ...
- vue生命周期updated的触发时机之debug过程中发现的firefox问题
现象描述: 断点位置1 谷歌debug的过程: 火狐debug的过程: 只要在改变数据之后有断点停顿,就会先去执行updated函数 断点位置2 此时火狐和谷歌是一样的效果,但是执行顺序是不一致的 谷 ...
- 六、Jmeter中自动提取Http请求参数，并put到Map，然后进行MD5加密
1.BeanShell PerOrocessor中的脚本 import src.com.csjin.qa.MD5.*;//个人jar包 import java.util.*; import java. ...
- 编译内核时报错./include/net/sch_generic.h:535:28: error: inlining failed in call to always_inline 'qdisc_pkt_len': indirect function call with a yet undetermined callee static inline unsigned int qdisc_pkt_
直接修改头文件include/net/sch_generic.h中的qdisc_pkt_len函数 将static inline unsigned int qdisc_pkt_len修改为: stat ...
- Volley源码分析
取消请求的源码分析: public void cancelAll(RequestFilter filter) { synchronized (mCurrentRequests) { for (Requ ...
- 代码实现:当我们下载一个试用版软件,没有购买正版的时候,每执行一次就会提醒我们还有多少次使用机会用学过的IO流知识,模拟试用版软件,试用10次机会,执行一次就提示一次您还有几次机会,如果次数到了提示请购买正版
package com.loaderman.test; import java.io.BufferedReader; import java.io.FileReader; import java.io ...
- 七十四：flask信号之flask的内置信号
flask所有的内置信号 1.template_rendered:模板渲染完成后的信号2.before_render_template:模板渲染之前的信号3.request_started:模板开始渲 ...