动画是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. C#属性方法 构造函数(不知道自己理解的对不对)

    using System; namespace test { class Program { static void Main(string[] args) { Cat kitty = new Cat ...

  2. kafka cmd首个单机例子配置

    下载地址:http://kafka.apache.org/downloads       http://mirror.bit.edu.cn/apache/kafka/2.3.0/kafka_2.12- ...

  3. Thread <number> cannot allocate new log, sequence <number>浅析

    有时候,你会在ORACLE数据库的告警日志中发现"Thread <number> cannot allocate new log, sequence <number> ...

  4. python--django for 循环中,获取序号

    功能需求:在前端页面中,for循环id会构不成连续的顺序号,所以要找到一种伪列的方式来根据数据量定义序号 因此就用到了在前端页面中的一个字段 forloop.counter,完美解决 1 <tb ...

  5. docker 日常操作(会更新)

    搜索镜像 1,命令行中所有命令搜索 docker search centos 2,在官网中搜索镜像 下载镜像 docker pull centos centos后要加:[版本号],如果没有就默认下载l ...

  6. [靶场实战]:SQL注入-显错注入

    SQL注入的本质:就是将用户输入的数据当作代码带入执行. 注入条件: 1.用户能控制输入 2.能够将程序原本执行的代码,拼接上用户输入的数据进行执行 首先检查是否存在注入点 Rank1: 构造语句 ? ...

  7. Redis—简介与安装

    Redis 简介 Redis 安装 Redis 配置文件 # Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程.daemonize yes # 当Redis以守护进 ...

  8. JAVA跨域、RestTemplate高并发下异常与配置、JSON数据Long转String

    ## 跨域支持 import org.springframework.context.annotation.Bean; import org.springframework.context.annot ...

  9. 201871010113-刘兴瑞《面向对象程序设计(java)》第十二周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  10. ajax给全局变量设置值,请先关掉异步上传效果

    $.ajax({ type: 'POST', url: "/downloadExcelInfo", timeout: 0, async: false, contentType: & ...