提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css3动画属性有哪些【html5教程】,css3,animation

本篇文章给人人带来的内容是引见css3动画属性,让人人相识在css3中有哪些动画属性,末了运用css3动画属性和
@keyframes划定规矩建立一个简朴的动画。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。

起首我们来细致引见一下css3的动画属性,让人人相识每一个属性的作用。【相干视频教程:CSS3教程】

css3的动画属性

1、animation-name属性

animation-name属性:定义动画称号,用于指定由划定规矩定义的动画的一个或多个称号。

注:animation-name属性必需与划定规矩@keyframes合营运用,由于动画称号是由@keyframes定义声明的,假如供应多个属性值用逗号离隔。

@keyframes划定规矩相当于一个定名空间,背面跟一个名词,假如在class中的animation-name定义了与之对应的name就能够实行动画。

2、animation-duration属性

animation-duration属性用于指定实行一个周期动画应当花多长时候。

时候以秒或毫秒指定,而且最初设置为“0”,这意味着动画马上发作;我们能够指定一个持续时候或多个以逗号分开的持续时候。

3、animation-timing-function属性

animation-timing-function属性是用来设置播放体式格局的,它能够指定定时函数,该函数定义动画对象随时候的速率。它形貌了动画在其持续时候的一个周期内怎样希望,许可它在其过程当中转变速率。

取值以下:

ease:减缓结果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。

linear:线性结果,速率将从最先到完毕稳固。

ease-in:渐显结果,动画将迟缓启动,然后取得更多加快并稳固到持续时候完毕。

ease-out:渐隐结果,动画将疾速启动,然后减速并稳固到持续时候完毕。

ease-in-out:渐显渐隐结果,它是组合了ease-in和ease-out。动画或过渡将最先迟缓,在中心加快,然后减速直至完毕。

step-start:立时跳转到动画完毕状况,动画或过渡将倏忽变成完毕状况并坚持在该位置直到动画完毕。

step-end:动画或过渡坚持其最先状况,直到动画实行完毕,直接跳转到其动画完毕状况。

step(<number>[,[start | end]]):

step()能够将转换的持续时候划分为相称大小的距离;或指定输出百分比的变化是发作在距离的最先照样完毕。

第一个参数number为指定的距离数,即把动画分为n步阶段性显现,第二个参数默认为end,设置末了一步状况,start为完毕时的状况,end为最先时的状况,若设置与animation-fill-mode的结果争执,以animation-fill-mode的设置为动画完毕状况。

cubic-bezier(,,,):特别的立方赛贝尔曲线结果

4、animation-delay属性

animation-delay属性:定义动画什么时候最先(最先时候),它许可动画在运用后的某个时候最先实行,或许在运用之前看似已最先实行一段时候。

初始值为“0”,这意味着动画将在运用于元素后马上最先播放。正时候值示意偏移量,该偏移量定义动画最先之间(经由过程动画属性将动画运用于元素时)与最先实行时的耽误时候。

我们还能够为animation-delay供应负值。负值,就像'0'一样,意味着动画一旦被运用,就会马上实行,然则由耽误的绝对值自动推动,就好像动画在过去已启动了指定的时候,而且它好像已在其游戏周期的半途最先了。比方,假如为animation-delay供应“-2S”的值,动画将马上启动,只需它被运用,但它将显现为它已启动2s之前,你已运用它。

5、animation-iteration-count属性

animation-iteration-count属性:用于指定动画住手前播放动画轮回的次数,即:播放次数。

初始值为“1”,示意动画将从头至尾播放一次;通常会取“infinite”值,示意无穷轮回播放。

6、animation-direction属性

animation-direction属性:用于指定动画是不是应在某些或一切轮回或迭代中反向播放,即:播放方向。

该属性可能取的值:

normal:一般方向

reverse:动画反向运转,方向一直与normal相仿

alternate:动画会轮回正反交替活动

7、animation-fill-mode属性

animation-fill-mode属性定义动画在播放后的状况。更具体地说,它定义了在动画耽误时候内以及动画完成实行后运用于元素的款式。

该属性可能取的值:

none:默认值,不设置款式

forwards:完毕后坚持动画完毕的状况

backwards:完毕后返回动画最先时状况

both:完毕后可遵照forwards和backwards两个划定规矩

8、animation-play-state属性

animation-play-state属性:用于检索或设置对象动画的状况,即:指定CSS 动画是正在运转照样停息。

该属性可能取的值:

running:默认值,活动;

paused:停息。

我们也能够运用动画的简写属性animation属性来一次性设置动画的款式:

/ *一个动画定义的语法* / 
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
/ *两个动画定义,用逗号离隔* / 
animation:animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],           
                      [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

css3动画属性和@keyframes划定规矩建立简朴动画:

代码实例:

HTML代码:

<div class="container">
  <p class="text">
    php 中文网
  </p>
</div>

css代码:

@import url(https://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Gentium Basic', serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.text {
  font-size: 3em;
  font-weight: bold;
  color: #009966;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: fall 4s infinite;
  animation: fall 4s infinite;
}

@-webkit-keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%, 60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%, to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

运转结果:

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是css3动画属性有哪些的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css3动画属性有哪些【html5教程】,css3,animation"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线