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 ...
随机推荐
- Linux file命令详解
file: 查看文件类型 file常见命令参数 Usage: file [OPTION...] [FILE...] Determine type of FILEs. --help display th ...
- 第0篇 如何访问win10的C$等默认共享
近日换新机器,装了win10,但想从旧机器访问win10的\\ip\D$拷数据过去,首先发现怎么也连不上win10的共享,于是把win10防火墙中“文件和打印机共享”的“专用”(即内网)勾选上终于可以 ...
- (z转)基于CPU的Bank BRDF经验模型，实现各向异性光照效果！
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人” BRDF 光照模型 10.2.1 什么 ...
- ZT linux的mount（挂载）命令详解
linux的mount(挂载)命令详解 来源:互联网 作者:佚名 时间:09-08 17:02:27 [大 中 小] 点评:linux下挂载(mount)光盘镜像文件.移动硬盘.U盘.Window ...
- [2018HN省队集训D5T1] 沼泽地marshland
[2018HN省队集训D5T1] 沼泽地marshland 题意 给定一张 \(n\times n\) 的棋盘, 对于位置 \((x,y)\), 若 \(x+y\) 为奇数则可能有一个正权值. 你可以 ...
- session过期，拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
- 走向Node与Webpack 之路 - CommonJS 模块化
走向Node与Webpack 之路 - CommonJS 模块化 1. 参考资料 JavaScript 标准参考教程(alpha) CommonJS规范(推荐 - 阮一峰写的) 官方网站 (看半天,不 ...
- C++编译器符号表有哪些内容？
http://blog.csdn.net/wangbingcsu/article/details/48340479 C++编译器符号表有哪些内容? 很早就想写一篇关于符号表的学习小结,可是迟迟不能下笔 ...
- Day5 JDBC
JDBC的简介 Java Database Connectivity:连接数据库技术. SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范(接口),使用同一套程序操作不同的数 ...
- R中执行if else报错：unexpected 'else' in "else"
注意if else的结构写法,有以下三种,除此之外,会不识别else. 结构 1 : if() xx else yy # 一行:结构 2: if() {xx} else {y ...