CSS动画效果之animation
Y(^o^)Y
css动画大乱弹之animation。
概述
什么是animation呢？在回答这个问题之前，先要说明什么叫做@keyframe（关键帧）。@keyframe算是一个动画模板。在其中，可以使用百分比，如从0%到100%的任意值，分别在每个百分比中，加上不同的属性，从而让元素达到一种在不断变化的动画效果。这和我们制作flash动画一样，我们只需设计几个关键帧，系统就能生成动画啦！
一个@keyframe例子：
/*定义关键帧动画*/
@keyframes myframe {
0%{
width: 100px;
height: 100px;
border-radius: 50%;
}
50%{
width: 200px;
height: 200px;
border-radius: 50%;
}
100%{
width: 100px;
height: 100px;
border-radius: 50%;
}
}
分别定义了动画0%（开始时），50%（播放一半时），100%（播放结束时）的效果，浏览器就能直接生成动画了。
ok，回到上面的问题：什么是animation？animation就是利用关键帧来设置动画的一个工具。可以这么想，关键帧就是一个“动画模型”，animation就是“播放器模型”。
animation的常用属性
1.animation-name: @keyframe动画的名称。
2.animation-duration: 动画完成一个周期需要的时间，默认是0。
3.animation-timing-function:动画的速度趋势（缓动效果），默认是ease。
4.animation-delay: 动画开始的延迟时间，默认是0。
5.animation-iteration-count: 动画播放的次数，默认是1。可以使用数字，也可以使用“infinite”，表示无限次循环播放。
6.animation-direction: 动画下一次播放的顺序，可以顺序或逆序，默认是"normal"。
7.animation-play-state: 动画是否正在运行或暂停，默认是"running"。
8.animation-fill-mode: 对象动画时间之外的状态。
animation与transition的区别
animation是针对@keyframe而言的，它只是在事件发生时触发动画，但是并不改变原来的属性，当事件完成，又恢复原样。transition强调是过渡动画，它是确确实实改变了属性。
实例
在浏览器中央有一个红色的正方形，鼠标放上去，变为圆形。鼠标移除，变为正方形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
</head>
<style type="text/css">
.box{
width: 100px;
height: 100px;
margin: 50px auto; /*水平居中*/
background-color: #f00; /*设置红色*/
}
.box:hover{
animation-name:myframe; /*要使用的关键帧动画的名称*/
animation-delay: 100ms; /*鼠标放上后延迟100ms发生动画*/
animation-duration: 1s; /*动画持续一秒*/
animation-timing-function:ease-in; /*加速播放*/
animation-iteration-count: infinite; /*循环播放*/
}
/*定义关键帧动画*/
@keyframes myframe {
0%{
width: 100px;
height: 100px;
border-radius: 50%;
}
50%{
width: 200px;
height: 200px;
border-radius: 50%;
}
100%{
width: 100px;
height: 100px;
border-radius: 50%;
}
} </style>
<body>
<div class="box"></div>
</body>
</html>
CSS动画效果之animation的更多相关文章
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- css 动画效果
要搞就搞明白,一知半解时停止研究 损失最大 css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点 ...
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- react中使用css动画效果
index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
随机推荐
- 为了让开发者写MaxCompute SQL更爽，DataWorks 增强SQL 编辑器功能
众所周知,数据开发和分析的同学每天都要花大量时间写MaxCompute SQL:Dataworks作为数据开发的IDE直接影响着大家的开发效率,这次新上线的Dataworks我们在编辑体验上做了很多工 ...
- YBB.DBUtils用法
通用数据访问类库,兼容ADO.ADO.NET方式访问. 利用ProviderFactory工厂方法,支持Oracle(不需要安装客户端).SQL Server.OleDb和ODBC等数据库访问. ht ...
- python multiprocessing 使用
如何在Pool中使用Queue,Stack Overflow的回答,戳这里 其实吧官方文档看一遍应该就大部分都懂了. 需要注意的是:在使用多进程的时候,我们的进程函数的传入参数必须是pickle-ab ...
- 第五周：MySQL数据库
首先,先了解一下数据库的基本概念要点: 数据库是数据存储的集合,表示数据结构化的信息 列存储表中的信息 行存储表的明细 主键是表中的唯一标识 主键不具备业务意义 在实际操作中,对表的主键不做强制性要求 ...
- Azkaban时区问题导致调度差1天
设置了Azkaban调度是每日凌晨一次,如下: 但是调度历史上显示最近一次调度时间是 初步怀疑是因为时区问题导致,查看服务器时区如下 cat /etc/timezone 为Asia/Shanghai. ...
- [AHOI2005]矿藏编码
嘟嘟嘟 这道题题面我是看了小半天才懂(太菜了),然后就发现好水啊. 只要维护一个栈,存的是t,代表当前的正方形是2t * 2t的,然后从头开始扫序列,如果遇到2,就把栈顶元素取出来,然后放进去四个t ...
- 《信息安全技术》实验二 Windows口令破解
<信息安全技术>实验二 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验环境 实验机Windows Server ...
- Redis的Pub/Sub客户端实现
前言 在学习T-io框架,从写一个Redis客户端开始一文中,已经简单介绍了Redis客户端的实现思路,并且基础架构已经搭建完成,只不过支持的命令不全,不过后期在加命令就会很简单了.本篇就要实现P ...
- leetcode589. N-ary Tree Preorder Traversal
python 版: class Solution(object): def preorder(self, root): ret, q = [], root and [root] while q: no ...
- week6:Diagnosing Bias vs. Variance难点记录
1.Bias vs. Variance是什么概念? 图形上的理解:https://www.zhihu.com/question/27068705 http://blog.csdn.n ...