文档章节

css3-动画animation

Cherry-m
 Cherry-m
发布于 2017/07/26 12:38
字数 859
阅读 1
收藏 0

在介绍animation之前,先介绍一下经常跟animation搭配使用的一个重要内容:keyframes。它被称为关键帧,类似于flash中的的关键帧,在css3中以@keyframes开头,后面{...}中定义一系列的时间段样式。

例如:

@keyframes wo{
    0%{
    	margin-left: 100px;
    	background: green;
    }
    40%{
    	margin-left: 150px;
    	background: red;
    }
    100%{
    	margin-left: 100px;
    	background: green;
    }
}

wo 是定义的动画名称,0%-100%之间可以创建多个百分比,分别给每个百分比中给需要添加动画效果的元素添加不同的样式,从而达到变换的效果。其中0%-100%可以使用关键字from to 来代表分别对应0%和100%。

animation-name属性:用来调用创建的@keyframes定义好的动画,none为没有任何动画效果。

注意:Chrome,Safari要在上面基础加-webkit-前缀,Firefox加-moz-。

animation-name:none | <identifier> [ , none | <identifier> ]*

animation-duration属性:用来设置动画播放时间,默认为0,这意味着动画周期为0,也就是没有效果。

animation-duration:<time> [ , <time> ]*

animation-timing-function属性:用来设置动画播放方式,分为以下几类:

ease:默认,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。

linear:元素样式从初始状态过渡到终止状态时速度是恒速。

ease-in:元素样式从初始状态过渡到终止状态时速度越来越快,呈加速状态,又称为渐显效果。

ease-out:元素样式从初始状态过渡到终止状态时速度越来越慢,呈减速状态,又称为渐隐效果。

ease-in-out:元素样式从初始状态过渡到终止状态时先加速后减速,又称为渐显渐隐效果。

 

animation-delay属性:设置动画开始播放时间

animation-delay:<time> [ , <time> ]*

animation-iteration-count属性:设置播放次数

animation-iteration-count:infinite | <number> [ , infinite | <number> ]*

animation-direction属性:设置动画播放方向,有两个值,其中,normal是动画的每次循环都是向前播放,alternate是动画在偶数次向前播放,奇数次向后播放。

animation-direction:normal | alternate [ , normal | alternate ]*

animation-play-state属性:设置动画播放状态,两个值,其中running默认值,类似于音乐播放器可以通过pause将正在播放的动画停下来,也可以将暂停的动画通过running运动起来,另外如果暂停动画那么元素样式就回到原始状态。

animation-play-state:running | paused [ , running | paused ]*

animation-fill-mode属性:设置动画时间外属性。其中none,默认,表示将动画按预期进行和结束,在动画完成最后一帧时动画会反转到初始帧处。forward表示在结束后继续应用最后关键帧的位置。backwards会向元素应用动画样式时迅速应用动画初始帧。both元素动画同时具有前面两种效果。

下面通过例子对上面属性进行试验:

定义一个div标签 ID并设置样式

<div id="nai"></div>
#nai{
	width: 200px;height: 100px;
	background-color: green;
}

定义的动画

@keyframes nai2{
	from{
		border-radius: 0;
	}
	to{
		border-radius: 100%;
	}
}

引用定义的动画:

#nai:hover{
	animation:nai2 3s ease-out 0s 1 alternate none;//1.调用动画名 
2.播放方式 3.动画运行方式  4.开始播放时间  5.播放次数  6.播放方向:第偶数次向前播放,基数次反方向播放7.动画时间外属性
}

通过这些属性能够简单容易的做出很多动画效果。

© 著作权归作者所有

Cherry-m
粉丝 0
博文 2
码字总数 2370
作品 0
武汉
私信 提问
50 个优秀 CSS3 技巧和优美的设计教程

Filter Functionality with CSS3 Thumbnail Proximity Effect with jQuery and CSS3 Fullscreen Background Image Slideshow with CSS3 CSS3 灯箱 Slopy Elements with CSS3 Item Blur Effec......

红薯
2012/01/11
2.5K
0
CSS3实现动画效果教程详解

在传统网页上动画一般都是通过Javascript或flash来实现,但是Html5的时代的到来,CSS的进化,让动画实现起来更加easy,今天E良师益友网就来介绍一下如何通过CSS3来实现简单的动画效果: 一、C...

罗马教堂的钟声
2016/01/08
264
0
2018-05-26 CSS3实现动画加载效果

最近在系统的学习CSS3方面的知识,以前经常在编程使用到部分CSS3属性,但没有想到还有许多功能强大的功能都是在CSS3当中提出的。对于学习前端的同学们,一定要熟悉掌握CSS3的相关知识,可以极...

瑾瑜爱上猫
2018/05/25
0
0
可视化CSS3动画代码生成js库插件-Bounce.js

简要教程   Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。该js库插件提供了一个在线APP,通过该APP可以在可视化的条件下编辑CSS3的各种动画效果,如移动、旋转、倾斜、e...

柠檬酷
2015/09/10
113
0
总结CSS3新特性(Animation篇)

动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法:   @keyframes name {0% { top: 0; }/0%可用from关键字替代/50% { top: 10px; }10...

贾顺名
2015/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
16分钟前
0
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
42分钟前
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
52分钟前
1
0
PHP的学习

PHP变量的命名必须以$符开始,如: $i;$j;$name; $符后面的第一个字符不可以是数字,只能是字母或者下划线(_)。 除了下划线(_)之外,变量中不能出现任何特殊字符,也就是变量只能包含...

墨冥
今天
3
0
一篇文章彻底搞懂Java虚拟机

概念: 虚拟机:指以软件的方式模拟具有完整硬件系统功能、运行在一个完全隔离环境中的完整计算机系统 ,是物理机的软件实现。常用的虚拟机有VMWare,Visual Box,Java Virtual Machine(Jav...

骚年锦时
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部