CSS 使用动画—— @keyframes 规则和 animation 规则

最新推荐文章于 2024-04-24 19:48:54 发布
最新推荐文章于 2024-04-24 19:48:54 发布
阅读量1.6w 收藏 90
点赞数 27
分类专栏： # CSS学习笔记 文章标签： CSS使用动画 @keyframes属性 animation属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41104353/article/details/79462118
版权

目录

动画

@keyframes规则

浏览器支持

CSS3动画属性

CSS3动画

什么是CSS3中的动画

实例

动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

 

@keyframes规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

 

CSS3动画属性

 

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
animation-fill-mode规定对象动画时间之外的状态。3

 

注释：当动画完成后，动画的状态会回到初始状态。

 

注释：要改变这一点，可以设置 animation-fill-mode: forwards; 使动画完成后停留在最后一帧。

 

CSS3动画

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

 

什么是CSS3中的动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

实例

捆绑一个动画到 div 元素，时长 5s

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

注释：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是0.

 

 

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

 

改变背景色和位置

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

 

该例设置了所有属性

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

 

 

使用上例的简写动画animation属性，效果相同：

 

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

 

在到处之间找我
关注
  • 27
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
1+x web前端开发初级理论答案+解析（一）
m0_57140271的博客
07-02 1万+
4.关于引入样式的优先级说法正确的是（ B） A、内联样式>!important>内部样式>外部样式>!important B、!important>内联样式>内部样式>外部样式 C、以上都不正确 解析：样式的优先级按照“就近原则”: • 行内样式（内联）> 内部样式> 外部样式>浏览器默认样式 7、在HTML5中，哪个属性用于规定输入字段是必填的？ (B) A、readonly B、required C、validate D、placeholder......
@keyframes规则实现多重背景的CSS动画
01-19
定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。 语法 CSS Code复制内容到剪贴板 @keyframes animationname {keyframes-selector {css
前端css中keyframes(关键帧)的简单使用
最新发布
小蜗牛764号的博客
04-24 1282
关键帧keyframes是css动画的一种，主要用于定义动画过程中某一阶段的样式变化，可以在动画中定义多个状态。关键帧常配合animation(动画)使用。先创建一个动画效果，我们就命名为sun（太阳）/* 动画持续8秒，无限循环 */然后对sun（使用关键帧）90% {/* 在动画的90%时，太阳下移并放大 *//* 太阳颜色 */100% {/* 在动画的100%时，太阳继续下移 *//* 添加阴影 */由上方法，便可生成一个可以变化的太阳了。
CSS3 @keyframes 用法（简单动画实现）
weixin_30500663的博客
02-24 323
定义： 通过 @keyframes 规则，能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，可以多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，应始终定义 0% 和 100% 选择器...
浅析css动画知识：用法介绍（规则与关键帧）animation-delay为负值提前进行动画、动画函数（三次贝塞尔曲线与步骤缓动函数）补间动画与逐帧动画效果、如何控制动画运行或暂停及控制元素各阶段状态
qq_47443027的博客
08-02 3855
因此，两种动画效果都是很有必要掌握的，在实际使用的时候灵活尝试，选择更适合的。forwards：一句话总结，元素在动画开始之前的样式为 CSS 规则设定的样式，而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值（也就是停在最后一帧）我们都知道，正常情况下，动画应该是运行状态，那如果我们将一些动画的默认状态设置为暂停，只有当鼠标点击或者 hover 的时候，才设置其。这个其实是不准确的，不全面的。但是，在动画的前 2s，另外两个元素是不会动的，只有 2s 过后，整个动画才是我们想要的。...
css3 动画 @keyframes 用法
qq_40072782的博客
09-08 1387
css3 动画 @keyframes 用法 1、动画必须定义动画的名称和时长. 2、用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，0%（from） 是动画的开始，100%（to） 是动画的完成。 3、为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。 4、给div写样式时必须相对定位 position：relative；否则动画不会动 ...
【前段基础入门之】=＞CSS3新特性 @keyframes 动画
学而不思则罔,思而不学则殆
11-06 1730
关键帧指的是，在构成一段css动画的若干帧中，起到决定性作用的2-3帧关键帧动画
CSS3 @keyframe动画的基本用法与常见错误用法
Cherishor的博客
04-08 1万+
@keyframes + animation 常见错误用法与 已知BUG，动画性能优化。
CSS3——@keyframe动画的基本用法，常见错误及解决方案
热门推荐
Erya Programming learning
08-04 3万+
文章目录一、基本用法1.关键帧@keyframes2.示例二、常见错误及解决方案（1）@keyframes 不能实现突变的状态变化display替代方案1.占据空间：visiblity2.不想占据空间：绝对定位+visiblity3.消失前占据空间但是消失后不占据空间：timeout和visiblity（2）@keyframes会增添/覆盖属性 一、基本用法 CSS3 动画 动画：指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。 h5中动画的运用效率要高于使用js来体现动画效果，因为动画是渲染式
web前端入门到实战：CSS动画@keyframes的用法
软件开发-前端开发-IT
09-09 1441
CSS动画 CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！ 动画浏览器支持 IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。 什么是CSS动画？ 动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元...
@keyframes和animation动画
03-29
前端——css学习
CSS3 @keyframes简单动画实现
09-24
主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3中的@keyframes关键帧动画的选择器绑定
09-24
在CSS3中，@keyframes规则提供了一种创建复杂动画的方法，这使得开发者无需依赖Flash或其他外部插件就能实现丰富的动态效果。@keyframes的关键帧动画选择器绑定是这一功能的核心，它允许我们将动画效果与特定的HTML...
keyframes介绍与调用动画方法
weixin_57727027的博客
03-05 3941
keyframes介绍 @keyframes changecolor{ 0%{ background: red; } 50%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的， 如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式， 从而达到一种在不断变化的效果。 02调用动画 调用动画
animaction，判断动画执行结束，js添加动画的@keyframes
Cat_LIKE_Mouse的博客
04-18 682
var anim = document.querySelector('div') anim.addEventListener('animationend',function(e){ //动画执行完毕 执行 console.log(e)//当前动画的属性 console.log(e.animationName) //当前动画的名字； }) js添加动画的@keyframes var style = document.styleSheets[0]; style.inse..
1+x 证书 Web 前端开发初级理论考试（试卷6 ）
Zeus
12-11 2万+
Web前端开发初级模拟测试卷（六） 获取更多资料请加入 官方QQ群 共55道题 总分：200分 形考总分：0分 一、单选题共30题，60分 1.阅读下面的JavaScript代码，输出结果是（） B function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); document.write(y); } A0 1 ...
css3动画的使用（@keyframes）
青菜馒头web前段
09-13 1858
一、CSS3 @keyframes 规则 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 目前支持的浏览如下:opera,firefox,所有webkit内核浏览器(safair,chrome),IE10+。废话不多说，先看下在各个浏览器上的实现:@keyframes myfirst { from {bac
html5动画 ease,CSS动画：keyframes用法介绍
weixin_33402252的博客
06-07 945
在CSS动画中，使用Transition技术是一种“隐式”的动画方法，而相对应的，还有一种“显式”的动画技术，就是，你可以在CSS里直接指定动画效果，这需要使用keyframes属性了。演示：秋叶飘落动画上面这个”秋叶飘落动画”的CSS动画演示应该是十分的精彩，充分展示了CSS动画的优异特性。下面我们来一步一步介绍如何制作keyframes动画，先从一个会弹跳的盒子入手。演示：会弹跳的盒子用CSS...
html中定义动画名字和规则,CSS3-animation属性和@keyframes规则
06-10
在HTML中定义动画名字可以通过CSS的@keyframes规则来实现，具体步骤如下： 1. 在CSS样式表中使用@keyframes规则定义动画效果。 例如，定义一个从左到右移动的动画： ```css @keyframes move-left-to-right { from {left: 0;} to {left: 100px;} } ``` 2. 在CSS样式表中使用animation-name属性引用定义好的动画名字。 例如，将上面定义好的动画应用到一个元素上： ```css .box { animation-name: move-left-to-right; animation-duration: 2s; animation-iteration-count: infinite; } ``` 这样，元素就会根据定义好的动画规则产生动画效果。 CSS3-animation属性可以同时定义多个动画属性，包括动画的持续时间、延迟时间、动画方式、重复次数等。例如： ```css .box { animation: move-left-to-right 2s ease-in-out 0s infinite alternate; } ``` 这样就可以直接定义元素的动画效果，而不需要再使用@keyframes规则了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值