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 crontab命令详解
crontab:定时任务的守护进程,精确到分,设计秒的我们一般写脚本 -->相当于闹钟 日志文件: ll /var/log/cron* 编辑文件: vim /et ...
- PHP CLI模式下echo换行
近日在执行导库程序的时候,需要在CLI模式下运行程序进行调试,如下图,这是什么鬼?不是我想要的结果 后经过查资料发现代码中执行的输出为 //错误方法实例 echo '其他-683\n'; //正确打开 ...
- java中判断对象中属性值是否为空的函数
public boolean checkObjFieldIsNull(Object obj) throws IllegalAccessException { boolean flag = false; ...
- 一、Vim编辑器 二、用户和组管理 三、软件的安装（jdk,mysql） 四、Shell编程
一.Vim编辑器的使用 1. vim编辑器的运行模式 编辑模式:等待用户编辑命令的输入 插入模式:编辑文本内容 命令模式:执行命令 2. 使用 :vim 文件名 3. 查看当前vim编辑器介绍:vim ...
- September 27th 2017 Week 39th Wednesday
We both look up at the same stars, yet we see such different things. 我们仰望同一片星空,却看见了不同的事物. Looking up ...
- Scala编程之访问修饰符
private ,protected,public,在不加前两者声明时为public为公共式访问: private为私有式访问:protected为家族式访问,与Java一致. object Oute ...
- Mina使用总结(一)MinaServer
我们先看一个最简单的Mina Server服务端代码,该段代码实现了服务端Server启动并监听客户端请求 package com.bypay.mina.server; import java.io. ...
- 利用Intellij IDEA开发Spark程序
网上例子大多是基于scala的,并且配置基于sbt.scala的eclipse环境超级麻烦,所以下载IDEA. 准备:jdk,IDEA安装(可以不用事先安装sbt和Scala,这在IDEA里都可以pl ...
- 判断是否是微信浏览器JavaScript代码
function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMe ...
- 关于elasticsearch 6.x及其插件head安装（单机与集群）5分钟解决
第一步,下载es6 +head wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.2.zip wg ...