<!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动画实例的更多相关文章

  1. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  2. css3 动画实例

    animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...

  3. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  4. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

  6. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  7. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  8. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  9. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

随机推荐

  1. [原]Django慢请求分析工具--dogslow

    当你的网站突然变慢了,你怎么办? 先看监控,查看系统的资源消耗,CPU?IO?磁盘? 然后看日志,查看第一个出现慢请求的接口是哪个? 然后看依赖的服务,是第三方服务还是DB瓶颈,还是redis变慢,还 ...

  2. mysql列属性auto(mysql笔记四)

    常见的的是一个字段不为null存在默认值 没值得时候才去找默认值,可以插入一个null到 可以为null的行里 主键:可以唯一标识某条记录的字段或者字段的集合 主键设置 主键不可为null,声明时自动 ...

  3. 关于PYTHON_EGG_CACHE无权限的问题

    Perhaps your account does not have write access to this directory? You can change the cache director ...

  4. 【PHP开源产品】Ecshop的商品筛选功能实现分析之一

    一.首先,说明一下为什么要对category.php文件进行分析. 原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互,而且 ...

  5. 搭通自己的电脑与GitHub的传输通道

    一.远程仓库怎么玩 1. 自己搭建一个运行Git的服务器 Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上,但肯定有一台机器有着最原始的版本库,然后别的机器来克隆这个原始版本库,这 ...

  6. Oracle并行事务回滚相关参数及视图

    /******相关参数****/fast_start_parallel_rollback1.取值有3种:false,low,high2.各值含义:false  ---禁用并行回滚功能          ...

  7. 第三章 设计程序架构 之 设计实现Windows Azure 角色生命周期

    1. 概述 Windows Azure 是微软的云计算平台.用于 在微软数据中心 通过全局网络 生成.发布和管理应用程序. 本章内容包括 startup tasks 以及  实现 Start, Run ...

  8. vim命令收集（持续中）

    保存: 按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件, ...

  9. Python数据类型-----数字&字符串

    Python数字类型 int类型表示的范围:-2147483648至2147483648之间,超出这个范围的数字即视为long(长整形) 在Python中不需要事先声明数据类型,它是根据具体的赋值来进 ...

  10. 【6.24-北京】AppCan移动开发者大会:最新议程曝光

    6.24,首届AppCan移动开发者大会将在北京国际会议中心召开. 大会以“平台之上,应用无限”为主题,旨在探讨在“互联网+双创”的大潮下,通过移动互联网技术.思维.模式,帮助开发者/创业者实现创新创 ...