第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；
一、Animation定义动画
CSS3的Animation是由“keyframes”这个属性来实现这样的效果，keyframes就是关键帧。下面先来看看Keyframes:
Keyframes语法规则：
@keyframes 动画名 {
from{开始状态}
to{结束状态}
}
调用
animation: 动画名称 持续时间 执行次数(infinite无限) alternate(来回) 运动曲线(linear线性) 延迟时间;
定义有两种方式，from......to和百分比。具体方法如下：
<style>
div{
width: 200px;
height: 200px;
background-color: green;
margin: 100px;
/*调用动画：动画名 持续时间 执行次数(数字或无限) alternate(来回) 线性 延迟*/
/* animation: move 2s infinite alternate linear 1s;*/ animation: move2 4s infinite 1s;
} /*定义动画*/
@keyframes move {
from{
transform: translateX(100px) rotate(0deg);
}
to{
transform: translateX(800PX) rotate(360deg);
} }
/*定义多组动画*/
@keyframes move2 {
0%{
transform: translate(100px,100px);
background-color: green;
border-radius: 0;
}
25%{
transform: translate(600px,100px);
background-color: yellow;
}
50%{
transform: translate(600px,600px);
background-color: blue;
}
75%{
transform: translate(100px,600px);
background-color: orange;
}
100%{
transform: translate(100px,100px);
background-color: red;
border-radius: 50%;
}
}
</style>
二、动画属性
- animation-name: move;/*动画名称*/
- animation-duration: 2s; /*持续时间*/
- animation-iteration-count:3 ; /*动画执行次数 无数次：infinite*/
- animation-direction: alternate;/*动画方向 normal 正常,alternate 反向*/
- animation-delay: 1s;/*动画延迟*/
- animation-fill-mode: forwards;/*设置动画结束后盒子的状态 forwards:动画结束后的状态 backwards:保持动画开始前的状态*/
- animation-timing-function: steps(3);/*运动曲线 linear线性 ease减速 ease-in 加速 ease-in-out先加速后减速 帧动画 steps()*/
三、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太阳系</title>
<style>
body{
background-color: #000;
}
.sun{
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background-color: yellow;
box-shadow: 0 0 30px 3px gold;
border-radius: 50%;
}
.earth{
width: 300px;
height: 300px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border: 1px solid #ccc;
border-radius: 50%;
}
.earth::before{
content: '';
width: 40px;
height: 40px;
position: absolute;
left:0;
top:50%;
transform: translate(-50%,-50%);
background-color: dodgerblue;
border-radius: 50%;
}
.moon{
width: 80px;
height: 80px;
position: absolute;
left:0;
top:50%;
transform: translate(-50%,-50%);
border-radius: 50%;
animation: rot 2s infinite linear;
}
.moon::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
left:0;
top:50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 50%;
}
.venus{
width: 500px;
height: 500px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border: 1px solid #ccc;
border-radius: 50%;
animation: rot 6s infinite linear;
}
.venus::before{
content: '';
width: 30px;
height: 30px;
position: absolute;
left:0;
top:50%;
transform: translate(-50%,-50%);
background-color: red;
border-radius: 50%;
}
.mars{
width: 600px;
height: 600px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border: 1px solid #ccc;
border-radius: 50%;
animation: rot 10s infinite linear;
}
.mars::before{
content: '';
width: 50px;
height: 50px;
position: absolute;
left:0;
top:50%;
transform: translate(-50%,-50%);
background-color: green;
border-radius: 50%;
}
@keyframes rot {
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
<div class="venus"></div>
<div class="mars"></div>
</body>
</html> 运行效果：
第100天：CSS3中animation动画详解的更多相关文章
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
- Android中的动画详解系列【4】——Activity之间切换动画
前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...
- Android Animation动画详解（二）： 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
- Android Animation动画详解（一）： 补间动画
前言 你有没有被一些APP中惊艳的动画效果震撼过,有没有去思考,甚至研究过这些动画是如何实现的呢? 啥?你没有思考,更没有研究过? 好吧,那跟着我一起来学习下如何去实现APP中那些让我们惊羡的动画特效 ...
- Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...
- 第98天：CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
随机推荐
- SSM框架及例子（转）
SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...
- rman的基于窗口的备份保留策略学习
例如: rman>configure retention policy to recovery window of 7 days; 那么就是说,至少要使得保留下来的备份,可以支持恢复到从当前回溯 ...
- SRM 653 CountryGroupHard
SRM 653 CountryGroupHard 题意: n 个人坐成一排,同一个国家的人坐在一起,记者问了一些人他们的国家有多少人,他们都回答了正确的信息.已知m条信息,每条信息形如第 pi 个位置 ...
- MySQL入门篇（五）之高可用架构MHA
一.MHA原理 1.简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Faceb ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...
- 【Unity3d】ScriptableObject的简单用法
ScriptableObject非常适合小数量的游戏数值. 使用ScriptableObject的时候需要注意,生成ScriptableObject数据文件需要自己写Editor代码实现. 大概的 ...
- Mysql 开启Federated引擎的方法
原文参考:http://www.thinksaas.cn/topics/0/63/63532.html 进入mysql命令行,没有看到Federated,说明没有安装 mysql>show en ...
- 七、EnterpriseFrameWork框架基础功能之字典数据配置管理
框架中的“通用字典数据配置管理”主要解决的问题是,所有的行业软件给客户实施第一步一般都是基础数据的维护,一个系统的字典是少不了的,涉及业务范围越广字典就越多,如果每一个字典数据都做一个界面来进行维护数 ...
- [network]交换机中用户权限
LEVEL 0(访问级):可以执行用于网络诊断等功能的命令.包括ping.tracert.telnet等命令,执行该级别命令的结果不能被保存到配置文件中. LEVEL 1(监控级):可以执行用于系统维 ...
- hadoop之Shuffle和Sort
MapRduce保证reducer的输入是按照key进行排过序的,原因和归并排序有关,在reducer接收到不同的mapper输出的有序数据后,需要再次进行排序,然后是分组排序,如果mapper输出的 ...