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 系统的目录结构_【all】
Linux系统的目录结构 /:最大根目录,存放系统程序 /etc: 加载配置文件好服务启动命令,系统配置文件 /etc/exports /etc/hosts /bin:binaries 存放命令 /s ...
- SpringBoot+MyBatis连接数据库
SpringBoot通过MyBatis连接数据库有2种方法: 1.注解 2.XML文件 1.注解 1.构建项目 2.添加依赖: <dependencies> <dependency& ...
- Linux 环境部署记录（三） - Jenkins安装与配置
Jenkins安装 为了兼容生产环境的jdk1.7版本,从官网得知,Jenkins必须是1.6之前的版本,因此下载jenkins-1.596.3-1.1.noarch.rpm到本地进行安装: #移动到 ...
- 面对对象程序设计_task2_C++视频教程
lessons about C++ 1月份的事情不该留到2月份来做,这几天看了几个地方的C++视频教程,不习惯于云课堂的话多等等,最终还是选择了慕课网上面的资源,也安下心来看了一些内容,下面附上课程详 ...
- Angular总结二：Angular 启动过程
要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json ...
- 常见dos命令（win7下测试）
按下组合键:win + R ,输入cmd进入Dos. 1. cls :清屏命令. 2. ver :查看系统版本号命令,winver弹出一个窗口显示更详细的系统版本号. 3. dir 无参数 : ...
- CVE-2014-4210SSRF漏洞分析
直接定位SearchPublicRegistries.jsp文件,47行接受输入的变量. 结果输出位置在120行 SearchPublicRegistries.jsp引入com.bea.uddiexp ...
- Day8 Servlet
HttpServletRequest 说明 公共接口类HttpServletRequest继承自ServletRequest.客户端浏览器发出的请求被封装成为一个HttpServletRequest对 ...
- [luogu2312] 解方程
题面 秦九韶公式 看了上面这个之后大家应该都会了, 就是读入的时候边读入边取模, 从\(1\)到\(m\)间将每一个数带进去试一下就可以了, 复杂度是\(O(nm)\)的. 古人的智慧是无 ...
- kubernetes dns 初步理解和使用 dnsmasq dns服务器跟host机器同步
1.安装DNS后,pod就可以通过dns来解析service,从而实现通信 2.创建一个dns测试工具pod apiVersion: extensions/v1beta1 kind: Deployme ...