零基础建站培训介绍

当前位置:

CSS3中的动画功能之transtions和animations详解

CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。

一.Transitions

Transitions功能通过光标来触发将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。可通过transtions属性来使用Transtions功能。

9

语法:transitions: property duration timing-function

  • property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)

兼容性写法:

div { width:100px; transition: all 1s linear;; -moz-transition: all 1s linear; /* Firefox 4 */ -webkit-transition: all 1s linear; /* Safari 和 Chrome */ -o-transition: all 1s linear; /* Opera */ }

也可以同时给一个元素加多个动画

transitions: background-color 1s linear, color 1s linear, width 1s linear;

  • linear                      在动画开始时到结束时以同样的速度进行改变
  • ease-in                   动画开始时速度很慢,然后速度沿曲线值加速
  • ease-out                 动画开始时速度很快,然后速度沿曲线值减速
  • ease                        动画开始速度很慢,然后速度沿曲线值加速,然后再沿曲线值减速
  • ease-in-out            同ease

  二 .Animations

transtions只能制作从起始到结束的一个动画,animations可以制作关键桢的更加复杂的动画。

语法:animations: name duration timing-function iteration-count;

  • name: 关键帧集合名(通过此名创建关键帧的集合,见下面样例代码)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
  • iteration-count: 迭代循环次数,可设置为具体数值,或者设置为infinite进行无限循环,默认为1

样例代码:

.box {
  background-color: red;
  animation: mycolor 4s linear infinite;//无限循环
//animation: mycolor 4s linear 1;//1次循环
 }
 @-webkit-keyframes mycolor {  
0% {   background-color: red; opacity:0.5;//可设置透明度  }  
40% {   background-color: darkblue;   }  
70% {   background-color: yellow;   }  
100% {   background-color: green;   }  
}

注:浏览器支持性不做介绍,具体使用时请做具体测试。

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • 什么是css3-gird布局格式 (140804 次浏览)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们
  • CSS3新增选择器有哪些 图文教程 (142147 次浏览)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。一.TransitionsTransitions功能通过
  • 特效介绍:一共是4款特别漂亮的jQuery彩色动画选项卡Tabs特效是一款提供多种颜色主题,可以制作背景图片动画,甚至可以自定义你自己的颜色主题。
  • 特效介绍:jQuery带音效旋转式动画切换幻灯片特效代码是一款类似一个旋转按钮,通过点击按钮的相应区域可以使幻灯片以旋转的动画方式来切换图片,
  • transform 属性transform的含义是:改变,使…变形;转换transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分
  • 支付宝大家应该都听说过,因为淘宝购买一般都用的是支付宝。在淘宝买东西只需要把钱打入支付宝,收到货到感觉货不错,再确认收货钱才会到卖家的支付宝