•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

css3的@keyframes是什么【css教程】,css3,@keyframes,动画

摘要: 本篇文章给人人带来的内容是引见css3的@keyframes是什么,让人人简朴相识@keyframes能够怎样运用。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。CSS3@...
本篇文章给人人带来的内容是引见css3的@keyframes是什么,让人人简朴相识@keyframes能够怎样运用。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。

CSS3 @keyframes是什么?有什么用?

@keyframes是CSS3的一种划定规矩,能够用来定义CSS动画的一个周期的行动,能够建立简朴的动画。【相干视频教程引荐:CSS3教程】

动画与转换相似,由于它们都是随时候转变CSS属性的示意值。重要区分在于,当属性值变动时(比方,当悬停时属性值发作转变时),转换会隐式的触发,但在运用动画属性时会显式实行动画。因而,动画须要显现动画属性的显式值。这些值是在@keyframes划定规矩中指定的动画关键帧定义的。因而,@keyframes划定规矩里是由一组封装的CSS款式划定规矩构成的,这些划定规矩形貌了属性值怎样随时候变化。

然后,运用差别的CSS animation(动画)属性,能够掌握动画的很多差别方面,包含动画迭代的次数,是不是在最先和完毕值之间交替,以及动画是不是应当运转或停息。动画也能够耽误其最先时候。

@keyframe划定规矩由关键字“@keyframe”构成,背面接着是给出动画称号的标识符(将运用animation-name援用),随后是经由过程一组款式划定规矩(用大括号分开)。然后,经由过程运用标识符作为animation-name属性的值,将动画运用于元素。比方:

/* 定义动画*/
@keyframes 动画称号{
    /* 款式划定规矩*/
}

/* 将它运用于元素 */
.element {
    animation-name: 动画称号(在@keyframes中已声明好的);

    /* 或运用动画简写属性*/
    animation: 动画称号 1s ...
}

在@keyframes划定规矩的大括号里有什么?

在大括号中,我们须要定义关键帧或航点,这些关键帧或航点指定在动画时期的特定点处正在动画化的属性的值。这许可我们掌握动画序列中的中心步骤。比方,一个简朴动画的@keyframe能够是如许:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

运转结果:

'0%'、‘50%’、'100%'都是关键帧选择器,每一个选择器定义一个关键帧划定规矩。关键帧划定规矩的关键帧声明块由属性和值构成。

上述动画相似于简朴的过渡结果:背景色彩从动画开首的一个值(0%)最先变化,在中心到达一个值(50%),在动画完毕时到达另一个值(100%)。“0%”、”50%”和“100%”关键帧选择器定义了愿望动画属性变动值的航点或百分点。我们也能够运用选择器关键字 from,to而不是离别运用0%和100%,它们是等效的。

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    	background-color: red;
    }
}

关键帧选择器由一个或多个以逗号分开的百分比值或from和to关键字构成。请注意,百分比单元申明符必需用于百分比值。因而,'0'是无效的关键帧选择器。

以下是具有关键帧选择器的动画示例,个中包含多个以逗号分开的百分比值和/或关键字关键帧选择器from和to。

@keyframes bouncing {
    0%, 50%, 100% { /* 或许 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

上面的@keyframes划定规矩定义:元素的顶部偏移量在最先时,半途和动画完毕时将即是零,而且它将四分之一和四分之三途径时即是100px; 这意味着元素在动画轮回中上下挪动了好几次。

@keyframes划定规矩建立简朴动画的示例:

1、定义动画发作的空间

HTML代码:

<div class="container">
  <div class="element"></div>
</div>

2、运用@keyframes划定规矩建立简朴动画

css代码

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3、运转结果

在上面的示例中,为名为“bounce”的动画指定了五个关键帧。在第一和第二关键帧之间(即,在'0%'和'25%'之间),运用ease-out定时功用。在第二和第三关键帧之间(即,在'25%'和'50%'之间),运用ease-in定时功用,等等。结果将显现为向上挪动50px的元素,在到达其最高点时减慢,然后在它回落到150px时加快。动画的后半部份以相似的体式格局运转,但仅将元素向上挪动25px。此动画发生一个弹跳结果,可用于模仿弹跳球动画。

申明:

@keyframes划定规矩不级联 ; 因而,动画永久不会从多个@keyframes划定规矩派生关键帧。

要肯定关键帧集,选择器中的一切值都需按时候递增排序。假如存在任何反复项(比方,假如我们编写了两个'50%'关键帧划定规矩和声明块),则@keyframes划定规矩将指定末了一个关键帧用于供应该时候的关键帧信息。@keyframes假如多个关键帧指定雷同的关键帧选择器值,则划定规矩中没有级联。

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

以上就是css3的@keyframes是什么的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号