第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 ...
随机推荐
- 20155308 《Java程序设计》实验五 网络编程与安全
20155308 <Java程序设计>实验五 网络编程与安全 实验内容 任务一 两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/6766748.ht ...
- 20155327 信息安全技术 实验二 Windows口令破解
课程:信息安全概论 班级:1553 姓名:了李百乾 学号:20155327 成绩: 指导教师: 李冬冬 实验日期及时间: 2017年10月11日 15:30-18:00 必修/选修:必修 实验序号:0 ...
- 20155334 2016-2017-2《Java程序设计》课程总结
20155334 2016-2017-2<Java程序设计>课程总结 1. 每周作业链接汇总 题目 主要内容 二维码 预备作业1 不知道所以然的第一次博客 预备作业2 有关之前的C语言的调 ...
- [BZOJ2127]happiness-[网络流-最小割]
Description 传送门 Solution 按照最小割的思路考虑. 根据题意,当两个人都选文(理),需要砍掉两个人都选理(文)的加成:如果两个人选的不一样,就要都砍掉. 这是一个网络流建模的套路 ...
- kobject和kset的一些学习心得
#include <linux/module.h> #include <linux/kernel.h> #include <linux/kobject.h> #in ...
- robotframework 脚本编写规范
测试集.脚本 测试脚本的名字不要超过20个字符,文件类型应该为txt 名字必需易读且有意义(看名知意) 记住测试集的名字是自动根据文件.目录的名字创建的.后缀名会被截去,下划线会转换为空格,如果名 ...
- selenium+python 搭建自动化环境
一.以搭建windows平台为例 准备工具如下: 1)下载Python 2)安装,配置环境变量 3)安装selenium,通过pip安装,命令如下: pip install selenium 方式二 ...
- JAVA学习笔记--匿名内部类
匿名内部类,即没有名字的内部类. 我们在编写JAVA程序时,往往要创建很多类,类是可以被重复使用的.但有时,我们创建了一个类,却只需要使用该类一次,那么单独为其编写一个类就显得有些麻烦,这时可以使用匿 ...
- java之接口开发-初级篇-http和https
http协议util address(url地址),str(数据参数) private static HttpMethod getPostJsonMethodInRequestBody(String ...
- Matlab中 .' 的作用。
Syntax B = A.' B = transpose(A) Description B = A.' returns the nonconjugate transpose of A, that ...