第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 ...
随机推荐
- 【洛谷P2016】战略游戏
题面 题解 树形\(dp\)(最大独立集) 设\(f_{i,0/1}\)表示\(dp\)到第\(i\)个点,在这个点放了(没放)士兵的最小花费 直接转移即可. 代码 #include<cstdi ...
- autoreleasepool 自动释放池的理解
常见的面试题:以下代码存在什么样的问题?应该如何改进? for (int i = 0; i < 100000; i++) { NSString *str = @"abc"; ...
- Windows网络通信(二)：socket异步编程
简述 这里使用的API和同步编程的API是差不多的,只多了一个ioctlsocket和select函数.这里面涉及一个很重要的结构体fd_set.这里用到的API大部分都是windows和linux通 ...
- qt cout输出中文乱码解决记录
工具 -> 选项-> 文本编辑器-> 行为 -> 文件编码->默认编码改为System 乱码原因: 默认用utf-8编码,控制台默认gbk编码,编码不一致导致的乱码
- 如何选择 .NET Framework目标版本
如何选择 .NET Framework目标版本 简介 .NET Framework是所有 .NET程序赖以运行的基础. 版本 到目前位置 .NET Framework共出了: .NET Framewo ...
- redis 为什么快
redis采用自己实现的事件分离器,效率比较高,内部采用非阻塞的执行方式,吞吐能力比较大. 不过,因为一般的内存操作都是简单存取操作,线程占用时间相对较短,主要问题在io上,因此,redis这种模型是 ...
- vps搭建个人网盘不二之选—kodexplorer介绍，包含安装步骤
之前给大家介绍过seafile.h5ai等网盘系统,今天给大家介绍下kodexplorer网盘系统.Kodexplorer,也叫芒果云.可道云.kodcloud,总之名字改了不少.但其本身作为一个网盘 ...
- 1035 Password （20 分）（字符串）
注意下单复数 #include<bits/stdc++.h> using namespace std; pair<string,string>pa; int main() { ...
- 使用qemu启动dd制作的img镜像
1. 准备工作 应用场景 在需要单机取证时,需要在不影响对象业务的情况下进行取证或分析,可以使用dd 对目标服务器进行镜像,生成img文件,镜像可以通过winhex进行静态分析.但是想要动态分析服务器 ...
- springmvc 静态资源 配置
SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...