第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 ...
随机推荐
- 网络中可以引用的jquery库
网络项目可以直接引用这个jquery库 <script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"> ...
- 20155217 2016-2017-2 《Java程序设计》第10周学习总结
20155217 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情 ...
- 20155218 2006-2007-2 《Java程序设计》第3周学习总结
20155218 2006-2007-2 <Java程序设计>第3周学习总结 教材学习内容总结 ＝＝使用在比较两个参考名称是否参考同一对象:equals()比较实质是否相同. 看见new关 ...
- 学号20155311 2016-2017-2 《Java程序设计》第6周学习总结
学号20155311 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1 InputStream与OutputStream Inpu ...
- 【JUC源码解析】FutureTask
简介 FutureTask, 一个支持取消行为的异步任务执行器. 概述 FutureTask实现了Future,提供了start, cancel, query等功能,并且实现了Runnable接口,可 ...
- ubuntu/linux系统中安装jdk以及eclipse(附图解详细步骤)
1.首先得先下载JDK和eclipsejdk下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...
- Mysql基础操作语句
SQL 简单的增删改查 不区分大小写, 表名和字段名可不加引号 查询语句 SELECT * FROM `table_name`; -- 注释 CTRL+/ : 注释 CTRL+/ : 取消注释 /* ...
- 列出连通集(mooc)
给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...
- python项目通过配置文件方式配置日志-logging
背景:项目中引入日志是必须的,这里介绍通过配置文件config.ini的方式配置日志 1.新建config.ini 2.添加配置 [loggers]keys=root,ProxyIP [handler ...
- LeetCode 289. Game of Life (C++)
题目: According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a ce ...