CSS3 动画--- CSS3 animation
动画是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的更多相关文章
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- 【WEB前端系列之CSS】CSS3动画之Animation
前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...
- CSS3动画属性animation的基本用法
CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点. ani ...
- css3动画(animation)效果3-正方体合成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画(animation)效果1-漂浮的白云
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C#属性方法 构造函数(不知道自己理解的对不对)
using System; namespace test { class Program { static void Main(string[] args) { Cat kitty = new Cat ...
- kafka cmd首个单机例子配置
下载地址:http://kafka.apache.org/downloads http://mirror.bit.edu.cn/apache/kafka/2.3.0/kafka_2.12- ...
- Thread <number> cannot allocate new log, sequence <number>浅析
有时候,你会在ORACLE数据库的告警日志中发现"Thread <number> cannot allocate new log, sequence <number> ...
- python--django for 循环中,获取序号
功能需求:在前端页面中,for循环id会构不成连续的顺序号,所以要找到一种伪列的方式来根据数据量定义序号 因此就用到了在前端页面中的一个字段 forloop.counter,完美解决 1 <tb ...
- docker 日常操作(会更新)
搜索镜像 1,命令行中所有命令搜索 docker search centos 2,在官网中搜索镜像 下载镜像 docker pull centos centos后要加:[版本号],如果没有就默认下载l ...
- [靶场实战]:SQL注入-显错注入
SQL注入的本质:就是将用户输入的数据当作代码带入执行. 注入条件: 1.用户能控制输入 2.能够将程序原本执行的代码,拼接上用户输入的数据进行执行 首先检查是否存在注入点 Rank1: 构造语句 ? ...
- Redis—简介与安装
Redis 简介 Redis 安装 Redis 配置文件 # Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程.daemonize yes # 当Redis以守护进 ...
- JAVA跨域、RestTemplate高并发下异常与配置、JSON数据Long转String
## 跨域支持 import org.springframework.context.annotation.Bean; import org.springframework.context.annot ...
- 201871010113-刘兴瑞《面向对象程序设计(java)》第十二周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- ajax给全局变量设置值,请先关掉异步上传效果
$.ajax({ type: 'POST', url: "/downloadExcelInfo", timeout: 0, async: false, contentType: & ...