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 ...
随机推荐
- 【原创】使用Java进行Clob转String字符串
背景 oracle字段类型varchar2最大长度4000,超过的怎么办 解决 使用clob类型,大字段,无长度限制 问题 使用Java的JDBC读取的RS获取的clob类型无法正常使用,封装的rs. ...
- 铁乐学Python_Day33_网络编程Socket模块1
铁乐学Python_Day33_网络编程Socket模块1 部份内容摘自授课老师的博客http://www.cnblogs.com/Eva-J/ 理解socket Socket是应用层与TCP/IP协 ...
- September 25th 2017 Week 39th Monday
No man is rich enough to buy back his own past. 没有人富有到可以赎回自己的过去. Those rich are not willing to buy b ...
- Spring Boot REST
资源(Resources) 所谓资源,就是网络上一个实体,或者是网络上一个具体信息.他可以是一段文本,一张图片,一种服务,总之是一个具体的实体.可以用一个URI(统一资源定位符)指向它,每种资源对应一 ...
- 汉字转拼音工具类java
package com.baihui.core.utils; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge. ...
- HDFS下载数据机制的底层分析
HDFS下载数据机制的底层分析 Hadoop中的RPC(Remote Procedure Call)框架 hadoop中结点间的通信采用的是RPC. RPC框架的实现机制图解: 从hdfs下载数据的源 ...
- codeforces 432E Square Tiling
codeforces 432E Square Tiling 题意 题解 代码 #include<bits/stdc++.h> using namespace std; #define fi ...
- 1562. [NOI2009]变换序列【二分图】
Description Input Output Sample Input 5 1 1 2 2 1 Sample Output 1 2 4 0 3 HINT 30%的数据中N≤50: 60%的数据中N ...
- [BJOI2019] 排兵布阵
题目 这个\(dp\)出在普及都算水题吧 直接背包,\(O(nms)\)跑不满,非常稳 #include<cstdio> #include<vector> #include&l ...
- Kubernetes 1.6新特性
Kubernetes 1.6已结发布,包括9个Stable特性.12个Beta特性.8个Alpha特性,共29个新特性.Kubernetes 1.6重点关注集群规模扩展和自动化.目前最多支持5000个 ...