CSS3的keyframe外面减少background

本文目录导航：

• CSS3的keyframe外面减少background-image不可显示图片。
• CSS3 animation动画，循环间的延时执行该怎样弄
• css3的@keyframes是什么

CSS3的keyframe外面减少background-image不可显示图片。

假设你要经常使用css3 中的

keyframe那么只能做到翻转的成果

CSS3 animation动画，循环间的延时执行该怎样弄

1、@keyframes规则。

from{属性：值;} to{属性：值;}。

2、0%{属性：值;} 100%{属性：值;}0% 是动画的开局，100% 是动画的实现。

可以在二者之间参与25%，50%等。

3、将动画绑定到选用器：在样式中，设置动画属性animation，自定义动画称号和时长。

4、规则动画开局时的期待时期：animation-delay：时期；可认为秒、毫秒2s，2ms。

5、播放次数：animation-iteration-count：次数；终身播放的值取infinite。

6、动画速度曲线：animation-timing-function：变动类型；变动类型有：linear 匀速；ease-in 开局慢；ease-out 完结慢；ease动画有一个缓慢的开局，而后快，完结慢。

裁减资料

animation 属性是一个简写属性，用于设置六个动画属性：

1、animation-name

规则须要绑定到选用器的 keyframe 称号。

2、animation-duration

规则实现动画所破费的时期，以秒或毫秒计。

3、animation-timing-function

规则动画的速度曲线。

4、animation-delay

规则在动画开局之前的提前。

5、animation-iteration-count

规则动画应该播放的次数。

6、animation-direction

规则能否应该轮番反向播放动画。

注释：请一直规则 animation-duration 属性，否则时长为 0，就不会播放动画了。

css3的@keyframes是什么

本篇文章给大家带来的内容是引见css3的@keyframes是什么，让大家便捷了解@keyframes可以如何经常使用。

有必定的参考价值，有须要的好友可以参考一下，宿愿对你们有所协助。

CSS3 @keyframes是什么？有什么用？@keyframes是CSS3的一种规则，可以用来定义CSS动画的一个周期的行为，可以创立便捷的动画。

【关系视频教程介绍：CSS3教程】动画与转换相似，由于它们都是随时期扭转CSS属性的示意值。

重要区别在于，当属性值更改时（例如，当悬停时属性值出现扭转时），转换会隐式的触发，但在运口头画属性时会显式执执行画。

因此，动画须要显示动画属性的显式值。

这些值是在@keyframes规则中指定的动画关键帧定义的。

因此，@keyframes规则里是由一组封装的CSS样式规则组成的，这些规则形容了属性值如何随时期变动。

而后，经常使用不同的CSS animation（动画）属性，可以管理动画的许多不同方面，包含动画迭代的次数，能否在开局和完结值之间交替，以及动画能否应该运转或暂停。

动画也可以提前其开局时期。

@keyframe规则由关键字“@keyframe”组成，前面接着是给出动画称号的标识符（将经常使用animation-name援用），随后是经过一组样式规则（用大括号分隔）。

而后，经过经常使用标识符作为animation-name属性的值，将动画运行于元素。

例如：/* 定义动画*/@keyframes 动画称号{ /* 样式规则*/}/* 将它运行于元素 */ { animation-name: 动画称号（在@keyframes中曾经申明好的）; /* 或经常使用动画简写属性*/ animation: 动画称号 1s ...}在@keyframes规则的大括号里有什么？在大括号中，咱们须要定义关键帧或航点，这些关键帧或航点指定在动画时期的特定点处正在动画化的属性的值。

这准许咱们管理动画序列中的两边步骤。

例如，一个便捷动画的@keyframe可以是这样：@keyframes change-bg-color { 0% { background-color: red; } 50% { background-color: blue; } 100%{background-color: red; }}{-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> <div></div></div>2、经常使用@keyframes规则创立便捷动画css代码body { background-color: #fff; color: #555; font-size: 1.1em; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;} { margin: 50px auto; min-width: 320px; max-width: 500px;} { 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假设多个关键帧指定相反的关键帧选用器值，则规则中没有级联。

总结：