css动画

coding

动画  transition:all .5s ease-in .2s;

过渡属性 transition-property
通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性:

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间

例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}


1.Keyframes介绍
Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,
后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

@keyframes changecolor{
  from{
   background: red;
  }
  to{
    background: green;
  }
}

浏览器的支持情况:Chrome 和 Safari 需要前缀 -webkit-;Foxfire 需要前缀 -moz-。

2.调用动画 animation-name
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的
动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。
语法:animation-name: none | IDENT[,none|DENT]*;
 
3.设置动画播放时间 animation-duration
animation-duration主要用来设置CSS3动画播放时间.
语法规则  animation-duration: <time>[,<time>]

4.设置动画播放方式 animation-timing-function
animation-timing-function属性主要用来设置动画播放方式。
语法规则:animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | 
cubic-bezier(<number>,<number>, <number>, <number>) [, ease | linear | ease-in | ease-out | 
ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
和transition中的transition-timing-function一样,具有以下几种变换方式:ease,ease-in,
ease-in-out,ease-out,linear和cubic-bezier。

5.设置动画开始播放的时间 animation-delay
animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点,和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间。
语法规则: animation-delay:<time>[,<time>]*

6.设置动画播放次数 animation-iteration-count
语法规则: animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常为整数,默认值为1,意味着动画只播放一次。
2、如果取值为infinite,动画将会无限次的播放。

7.animation-direction属性主要用来设置动画播放方向
语法规则:animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值:normal、alternate
1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
注意:Chrome或Safari浏览器,需要加入-webkit-前缀!

8.animation-play-state属性主要用来控制元素动画的播放状态
参数: 其主要有两个值:running和paused。
其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。

9.animation-fill-mode 设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:
none、forwards、backwords和both。:
属性值      效果
none       默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards   表示动画在结束后继续应用最后的关键帧的位置
backwards  会在向元素应用动画样式时迅速应用动画的初始帧
both       元素动画同时具有forwards和backwards效果
在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的
默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧
上而不回到动画的第一帧上。或者同时具有这两个效果。

以上是 css动画 的全部内容, 来源链接: utcz.com/z/509000.html

回到顶部