动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

语法格式:

animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;

关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r

@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite;  无限循环播放    默认是1次
animation-direction: alternate 动画应该轮流反向播放 默认是 normal
animation-play-state:paused; 暂停动画"

小汽车案例

body {
background: white;
}
img {
width: 200px;
}
.animation {
animation-name: goback;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes goback {
0%{}
49%{
transform: translateX(1000px);
}
55%{
transform: translateX(1000px) rotateY(180deg);
}
95%{
transform: translateX(0) rotateY(180deg);
}
100%{
transform: translateX(0) rotateY(0deg);
}
}

CSS3 动画--- CSS3 animation的更多相关文章

  1. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  2. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...

  3. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  5. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  6. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  7. CSS3动画属性animation的基本用法

    CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点. ani ...

  8. css3动画(animation)效果3-正方体合成

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

  9. css3动画(animation)效果1-漂浮的白云

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

随机推荐

  1. 前端之HTML介绍及使用

    一.HTML介绍 1.1 web本质 在pycharm写入一下代码,然后在浏览器地址栏输入地址和端口127.0.0.1:8080,回车,回来运行代码,直接访问客户端发送的内容conn.send(b'& ...

  2. 由浅入深了解RabbitMQ

    简介 RabbitMQ是流行的开源消息队列系统.RabbitMQ是AMQP(高级消息队列协议)的标准实现.支持多种客户端,如:Python.Ruby..NET.Java.JMS.C.PHP.Actio ...

  3. FCC---Use the CSS Transform scale Property to Scale an Element on Hover

    The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your ...

  4. 安全意识第八期丨OMG!发个帖子竟然摊上大事了

    互联网时代,话在网上说.钱在网上花.事在网上办,这早已成为一种习惯,越来越多的人也倾向于通过网络来获取信息. 借助现代信息技术,网络传播者通过即时通讯工具.微博.朋友圈等渠道发布信息,虽然传播起来更便 ...

  5. php反序列化漏洞绕过魔术方法 __wakeup

    0x01 前言 前天学校的ctf比赛,有一道题是关于php反序列化漏洞绕过wakeup,最后跟着大佬们学到了一波姿势.. 0x02 原理 序列化与反序列化简单介绍 序列化:把复杂的数据类型压缩到一个字 ...

  6. Dynamics 365应用程序池回收对连接造成的影响。

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. Ionic实现路由ion-tabs

    1.导包 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalabl ...

  8. 查找 oracle 数据库中包含某一字段的所有表的表名

    select table_name from DBA_TAB_COLUMNS where COLUMN_NAME='字段名'; 字段名需要大写

  9. Python完全平方数

    python解题源代码如下: import math """ 简述:一个整数,它加上100和加上268后都是一个完全平方数 提问:请问该数是多少? Python解题思路分 ...

  10. Saltstack_使用指南14_无master

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...