CSS3变形与动画下
来源:互联网 发布:金盏花洁面啫喱知乎 编辑:程序博客网 时间:2024/05/17 06:06
1、 Keyframes介绍
Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。
经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。
Chrome 和 Safari 需要前缀 -webkit-;Foxfire 需要前缀 -moz-。
@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}
@keyframes changecolor{0%{background: red;}100%{background: blue;}}div {width: 300px;height: 200px;background: red;color:#fff;margin: 20px auto;}div:hover {animation: changecolor 5s ease-out .2s;}
2、 调用动画
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。
none为默认值,当值为 none 时,将没有任何动画效果,这可以用于覆盖任何动画。
注意:需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀,Firefox加上-moz-。
@keyframes around{ 0% { transform: translateX(0); } 100%{ transform: translateY(0); }}div span { animation-name:around; }
3、 设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒
animation-duration: 5s;
4 、设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
它和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功如下:
animation-timing-function:ease;
5 、设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间。
animation-delay:3s;
6 、设置动画播放次数
animation-iteration-count属性主要用来定义动画的播放次数。
其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。
如果取值为infinite
,动画将会无限次的播放。
7 、设置动画播放方向
animation-direction属性主要用来设置动画播放方向,其语法规则如下:
其主要有两个值:normal、alternate
1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为:
animation-direction:alternate;
注意:Chrome或Safari浏览器,需要加入-webkit-前缀!
8 、设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。
参数:
其主要有两个值:running和paused。
其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
例如,页面加载时,动画不播放。代码如下:
animation-play-state:paused;
9 、设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下:
属性值
效果
none
默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards
表示动画在结束后继续应用最后的关键帧的位置
backwards
会在向元素应用动画样式时迅速应用动画的初始帧
both
元素动画同时具有forwards和backwards效果
在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
例如:让动画停在最一帧处。代码如下:
animation-fill-mode:forwards;
10、制作3D旋转导航综合练习题
- CSS3变形与动画下
- CSS3中的变形与动画(下)
- CSS3中的变形与动画(下)
- css3变形与动画总结(下)
- CSS3 变形与动画
- CSS3变形与动画上
- 慕课网-十天精通CSS3-CSS3中的变形与动画(下)
- CSS3变形与动画的相关属性
- CSS3中的变形与动画(上)
- css3变形与动画总结(上)
- 【CSS3初探之变形与动画】令人惊叹的CSS3
- 8.HTML5 CSS3 变形与动画相关属性
- css3学习笔记(四)---变形与动画
- CSS3过渡、变形和动画
- 慕课网-十天精通CSS3-CSS3中的变形与动画(上)
- [18]CSS3 变形效果(下)
- CSS变形与动画
- css3中的变形和动画(3)
- 好的博客链接
- Android的屏幕适配
- windows下基于虚拟机的Ubuntu安装
- NDK crash栈信息的错误定位
- 【Qt OpenGL教程】19:粒子系统
- CSS3变形与动画下
- 通知
- aws 代码扫描所有dynamoDB数据返回ScanItemResult格式
- UVALive - 4043 Ants (KM裸题)
- 手机号码匹配
- 杭电 1016 Prime Ring Problem【DFS】
- android 语音识别
- Java--内部类,局部类与匿名类
- linux上寻找并杀死僵尸进程