30分钟玩转css3动画， transition，animation
其实css3动画是就是2种实现，一种是transition，另一种就是animation。transition实现的话就是只能定制开始帧，和结束2帧；而animation实现的话可以写很多关键帧。
没有前戏，直进主题。
transition
包含4个值，例如：-webkit-transition:all .5s ease 1s;
分别顺序是(m代表必须)： 变换的属性(m)、变换过渡的时间(m)、变换的速率、变换延时执行的时间。
来个小demo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.transition {
width:30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
display: inline-block;
background:lightblue;
-webkit-transition:all .5s ease;
transition:all .5s ease;
color:#fff;
}
.transition:hover {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</head>
<body>
<div class="transition">×</div>
</body>
</html>
应用例子：
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html
animation：
就是一个动画对应一个keyframes，然后一个keyframes 里可以有N多个关键帧。
例如一个keyframes里我们可以这样写：
@-webkit-keyframes go {
0%, 100% {
-webkit-transform: translateX(0);
}
50% {
-webkit-transform: translateX(500px);
}
}
然后我们需要在应用这个keyframes的元素上写一个animation,
例如：-webkit-animation:go 2.5s ease infinite 0;
参数顺序分别是(m代表必须)：动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间
小demo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.animation {
width: 100px;
height: 100px;
display: block;
background: pink;
-webkit-animation: go 2.5s infinite;
/*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/
} @-webkit-keyframes go {
0%, 100% {
-webkit-transform: translateX(0);
}
50% {
-webkit-transform: translateX(500px);
}
}
</style>
</head>
<body> <div class="animation"></div> </body>
</html>
应用deom：loading状态、三条线变箭头。
http://skyweaver213.github.io/slide/widget/slide1/slide.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.loading {
position: relative;
width: 40px;
height: 40px;
margin: 40px auto;
-webkit-transform:rotate(165deg);
}
.loading:before, .loading:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
display: inline-block;
border-radius: 4px;
-webkit-transform: translate(-50%, -50%);
}
.loading:before {
-webkit-animation:before 2s infinite;
}
.loading:after {
-webkit-animation:after 2s infinite;
} @-webkit-keyframes before {
0% {
width: 8px;
box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
} 35% {
width: 40px;
box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);
} 70% {
width: 8px;
box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);
} 100% {
box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
}
} @-webkit-keyframes after {
0% {
height: 8px;
box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);
} 35% {
height: 40px;
box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);
} 70% {
height: 8px;
box-shadow: 8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);
} 100% {
box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);
}
} </style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
变换成箭头：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
margin:0;
padding:0;
}
.arrow_div {
width: 100px;
height: 100px;
background: #000;
position: relative;
}
.arrow {
width: 33px;
height: 4px;
display: inline-block;
background: #fff;
position: absolute;
left:0;
right:0;
} .arrow_body {
margin: auto;
top:40px;
-webkit-animation: 2s linear body_kf infinite;
} @-webkit-keyframes body_kf {
0% { }
30%, 50% {
-webkit-transform: rotate(180deg);
}
80%, 100% {
-webkit-transform: rotate(360deg);
} } .sleft {
width: 33px;
height: 33px;
border: transparent;
position: absolute;
top: 25px;
margin: 0 auto;
left: 0;
right: 0;
-webkit-animation: 2s linear sleft_kf infinite;
}
.sleft:before {
content: '';
width: 33px;
height: 4px;
display: inline-block;
background: #fff;
top: 0;
position: absolute;
-webkit-animation: 2s linear sleft_before_kf infinite;
}
@-webkit-keyframes sleft_kf {
0% {}
30%, 50% {
-webkit-transform: rotate(222deg);
}
80%,100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes sleft_before_kf {
0%, 100%{}
20% {
width: 28px;
top: 1px;
left: 3px;
}
25% {
width: 26px;
top: 2px;
left: 6px;
}
30%, 40%, 50% {
width: 22px;
top: 3px;
left: 8px;
}
80% {
width: 33px;
top:0;
left:0;
}
}
.sright {
width: 33px;
height: 33px;
border: transparent;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 25px;
position: absolute;
-webkit-animation: 2s linear sright_kf infinite; } .sright:before {
content: '';
width: 33px;
height: 4px;
display: inline-block;
background: #fff;
bottom: 0;
position: absolute;
-webkit-animation: 2s linear sright_before_kf infinite;
}
@-webkit-keyframes sright_kf {
0% {}
30%, 50% {
-webkit-transform: rotate(135deg);
}
80%,100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes sright_before_kf {
0%,100% {}
20% {
width: 28px;
bottom: 1px;
right: 1px;
}
25% {
width: 25px;
bottom: 2px;
right: 2px;
}
30%, 40%, 50% {
width: 22px;
bottom: 3px;
right: 3px;
} 80% {
width: 33px;
bottom: 0;
right:0;
}
} </style>
</head>
<body>
<div class="arrow_div">
<div class="sleft"></div>
<i class="arrow arrow_body"></i>
<div class="sright"></div>
</div>
</body>
</html>
30分钟玩转css3动画， transition，animation的更多相关文章
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- 学习笔记之Linux Shell脚本教程：30分钟玩转Shell脚本编程
Linux Shell脚本教程:30分钟玩转Shell脚本编程 http://c.biancheng.net/cpp/shell/
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- CSS3(transform/transition/animation) 基础 总结
1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- css3 tranform transition animation
tranform:对象图形变形 tranform的属性包括: 1.none 表示不进行变换: 2.rotate 旋转 transform:rotate(20deg) 旋转 ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
随机推荐
- pthread的各种同步机制
https://casatwy.com/pthreadde-ge-chong-tong-bu-ji-zhi.html pthread是POSIX标准的多线程库,UNIX.Linux上广泛使用,wind ...
- [18/11/20]break与continue的区别
一.普通break 和continue 1.break: break用于强行退出循环,不执行循环中剩余的语句. 2.continue continue 语句用在循环语句体中,用于终止某次循环过程,即跳 ...
- 【luogu P1462 通往奥格瑞玛的道路】 题解
题目链接:https://www.luogu.org/problemnew/show/P1462 记住HP=0也叫死. #include <queue> #include <cstd ...
- 【luogu P2984 [USACO10FEB]给巧克力Chocolate Giving】 题解
题目链接:https://www.luogu.org/problemnew/show/P2984 练习SPFA,把FJ当做起点,求出到所有牛的最短路,再把两个牛的相加. #include <cs ...
- linux 学习(二)防火墙
ubuntu 第四 防火墙 安装 sudo apt-get install ufw 启用 sudo ufw enable 拒绝所有 sudo default deny 开启端口 sudo ufw al ...
- 【Linux-CentOS】【转-更正】使用CentOS DVD1 和DVD2做本地yum源
原文在此.此文写的非常好,怕网络丢失,特转来,并做了更正. CentOS6以上版本一般都会提供一个DVD1和一个DVD2镜像,使用DVD1即可安装使用CentOS了,DVD2中存放了一些额外的软件包, ...
- Entity Framework 一
本篇主要介绍:EntityFramework简介, 实体框架架构图, EF版本 实体框架: 编写和管理数据访问的ADO.Net代码是一件单调乏味的工作.微软已经提供了一个名为“实体框架”的O / RM ...
- EntityFramework Code-First-------领域类配置之DataAnnotations
EF Code-First提供了一个可以用在领域类或其属性上的DataAnnotation特性集合,DataAnnotation特性会覆盖默认的EF约定. DataAnnotation存在于两个命名空 ...
- Python基础—06-函数基础
函数基础 函数简介 定义:就是具有特定功能的一段代码 优点: 解决代码的重复书写 可以将功能的实现着和使用者分开,提高开发效率 分类: 库函数:print.input.abs等 自定义:用户自己封装的 ...
- Windows远程桌面连接命令mstsc
常用的:1. mstsc /v: 192.168.0.1 连接数满了之后使用的:2. mstsc /v: 192.168.0.1 /console -admin Mstsc 命令参考Updated: ...