css3动画实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<h3>动画笔记</h3>
<style>
h3{margin: 0 auto;width: 100px;}
.loading-demo{height: 60px; width: 60px;margin: 20px auto;position: relative;}
.act1,.act2{height: 100%;width: 100%;border-radius: 50%;background: #26c1ce;position: absolute;top: 0;left: 0;
-webkit-animation: loading 2s infinite ease-in-out ;
-moz-animation: loading 2s infinite ease-in-out;
animation: loading 2s infinite ease-in-out;
/*动画名字 动画时间 循环 开始最后缓慢*/
opacity: .6;
}
/*颜色加深是因为重叠了*/
.act2{-webkit-animation-delay:-1s;}
@-webkit-keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
@-moz-keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
@keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
</style>
</head>
<div class="loading-demo">
<div class="act1"></div>
<div class="act2"></div>
</div>
<body>
<!--
https://github.com/i-akhmadullin/brackets-csscomb
css排序
@keyframes
属性:名字 百分比 动作
------------------------------------------------------------------------------------
animation 所有动画属性的简写属性，除了 animation-play-state 属性。【动画 】
语法：animation: name duration timing-function delay iteration-count direction;
语法：动画: 动画名字 完成时间 什么时候快什么时候慢 动画延迟 播放次数 是否反向播放
------------------------------------------------------------------------------------
animation-name 规定 @keyframes 动画的名称。 【关键帧】
------------------------------------------------------------------------------------
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 【持续时间】
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
------------------------------------------------------------------------------------
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 】【定时活动/速度曲线 】
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
------------------------------------------------------------------------------------
animation-delay 规定动画何时开始。默认是 0。
animation-delay 属性定义动画何时开始。
允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
------------------------------------------------------------------------------------
animation-iteration-count 规定动画被播放的次数。默认是 1。 【重复计数/重复播放 】
n 定义动画播放次数的数值。 、
infinite 规定动画应该无限次播放。
----------------------------------------------------------------------------------
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 【反向播放 】
normal 默认值。动画应该正常播放。 测试
alternate 动画应该轮流反向播放。
------------------------------------------------------------------------------------
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。【播放状态】
paused 规定动画已暂停。 测试
running 规定动画正在播放。
------------------------------------------------------------------------------------
animation-fill-mode 规定对象动画时间之外的状态。【填充模式/结束后动画是否可见】
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
------------------------------------------------------------------------------------
-->
</body>
</html>
css3动画实例的更多相关文章
- css3动画实例测试
1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...
- css3 动画实例
animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- CSS3动画制作的简单示例
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
随机推荐
- 显示当前一个礼拜的日期 new Date（）
显示这一礼拜的日期 html: <div class="month"></div> <table> <tr> <th>日 ...
- CentOS 6.X版本升级PHP
#-----------------------------CentOS 6.X版本升级PHP------------------#! /bin/sh #1.关闭selinuxcp -rp /etc/ ...
- winform 自定义控件以及委托事件的使用
源代码:http://files.cnblogs.com/files/qtiger/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%AE%89%E8%A3%85%E5%8C%85%E4% ...
- Silverlight RadGridView的HeaderCellStyle样式
效果图 <UserControl x:Class="SilverlightApplication7.MainPage" xmlns="http://schemas. ...
- JS中的控制函数调用：call(),apply()和bind()
所有的函数都具有call(),apply()和bind()方法.它们可以在执行方法的时候用一个值指向this,并改变面向对象的作用域. apply方法: 以下的两种表达式是等价的: func(arg1 ...
- 透过c的编程原则，来规范自己现在的一些编程习惯
1.合理的使用注释 注释为:/*…………*/ 注释有以下几种情况: 1) 版本.版权声明. 2) 函数接口说明. 3) 重要的代码或者段落显示. 注释注意: 1) 注释是对代码的解释,不是对文档.注释 ...
- Jquery note
the purpose: write less. do more 写得少,做更多 jquery 基本选择器, $("p ,div ")匹配所有的P元素和DIV元素 , $(&q ...
- C#使用SQL存储过程完整流程
存储过程就是固化在SQL数据库系统内部的SQL语句,这样做的好处是可以提高执行效率.提高数据库的安全性.减少网络流量.接下来就讲解如何在数据库中建立一个存储过程. 打开SQL2055数据库,展开“数据 ...
- 小课堂week15 年终小结
年终小结 一年的最后,想和大家回顾一下今年讲过的技术和书,用一些问答,一起来提炼一下精华. Spark 为什么需要分布式计算? 计算的增长速度超过了硬件的增长,单一服务器无法负荷.多服务器带来的是复杂 ...
- debian完整部署 Nginx + uWSGI + Django
手工部署一个Django服务器真心不容易,需要安装很多东西.从头开始搭建服务器,主要是为了梳理一下后续开发中一般为碰到的平台部署.对后续问题的解决有一定帮助. 通常部署有2中方式: 一种是使用现成提供 ...