css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行

最新推荐文章于 2024-03-06 17:06:07 发布
最新推荐文章于 2024-03-06 17:06:07 发布
阅读量5.7k 收藏 5
点赞数 1
分类专栏： jq HTML5 CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44011751/article/details/107488830
版权
HTML5 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
CSS3
10 篇文章 0 订阅
订阅专栏
jq
2 篇文章 0 订阅
订阅专栏

效果如图:
在这里插入图片描述

在这里插入图片描述

1.动画的基础属性,上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D基础动画</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
        }
        /*中心点*/
        div{
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius:50%;
            /*定位，相对body设置绝对定位*/
            position: absolute;
            left: calc(50% - 10px);
            top: calc(50% - 10px);
        }
        /*旋转的小球*/
        section{
            width: 100px;
            height: 100px;
            background-color: red;
            /*定位，相对body设置绝对定位*/
            position: absolute;
            left: calc(50% + 60px);
            top: calc(50% + 60px);
            border-radius: 50%;
            /*添加动画*/
            /*动画名称*/
            animation-name: xuanzhuan,changeColor;
            animation-duration: 3s;
            animation-iteration-count:infinite;
            /*速率默认ease（慢-快-慢）
                ease-in(慢-快)
                ease-out(快-慢)*/
            animation-timing-function:ease;
            animation-timing-function: cubic-bezier(0.05,0.66,0.28,1.2);
            /*origin赋值为x轴 y轴的坐标点*/
            transform-origin: -60px -60px;
            /*添加变色的动画----不能在这里添加新的动画，旧的会被覆盖，可以将两个动画属性写在一起*/
            /*animation: changeColor 3s linear infinite;*/
        }
        /*动画规则*/
        @keyframes xuanzhuan{
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
        @keyframes changeColor{
            0%{
                background-color: red;
            }
            20%{
                background-color: forestgreen;
            }
            40%{
                background-color: darkblue;
            }
            60%{
                background-color: tomato;
            }
            80%{
                background-color: mediumvioletred;
            }
            100%{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <section></section>
</body>
</html>

2.动画的其他属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D动画的其他属性</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
        }
        section{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            position: absolute;
            left: 100px;
            top: 100px;

            /*添加动画  将容器移动到距离右侧100px的位置上*/
            animation: move 3s;
            animation-delay: 0s;
            animation-iteration-count: 3;

            /*设置动画的方向
            alternate属性使动画能够正反轮流播放*/
            animation-direction: alternate;

            /*动画的填充模式，当动画无限次数执行时以下样式无效*/
            /*动画结束后将保持到动画开始前的状态*/
            animation-fill-mode:backwards;
            /*动画结束后将保持到动画结束后的状态*/
            animation-fill-mode: forwards;
            /*应用以上两者模式，动画最终保持在结束后的状态*/
            animation-fill-mode: both;

            /*动画的速率是通过贝塞尔曲线实现的，数值越大，速度越慢   数值越小，速度越快
                参数中，前两个值指的开始状态的速率，后两个值指的结束状态的速率*/
            animation-timing-function: cubic-bezier(0.975, 0.02, 0.165, 1);
        }
        @keyframes move{
            from{
                /*transform: translate(0);*/
                left: 100px;
            }
            to{
                /*transform: translateX(calc(100% - 200px));*/
                /*from中使用left  to中使用right是无效的*/
                left: calc(100% - 100px - 100px);
            }
        }
    </style>
</head>
<body>
    <section></section>
</body>
</html>

如果文章对你有帮助,麻烦点个赞,谢谢~

舞空~
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3，可以为一个元素添加多个动画
沫沫酱
08-16 1万+
例如： .screen3.on .text5 {   animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble;   -webkit-animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s e
CSS3中Animation为同一个元素添加多个动画效果
weixin_30917213的博客
11-06 2119
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法，就是说一个元素，只能给它定义一个动画效果，不能同时定义。 需求说明比如说，我想实现一个这样的动画效果: 一颗星星从上往下滑落，当滑落到指定位置时开始闪烁 这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画) 因为 CSS3 Animation 是不能给星星这个元素同时定义这两...
关于 CSS3 中的 animation 属性
daoxiaofei的博客
10-11 583
animation属性为多个属性混合的简写属性，可以为元素设置动画。 CSS语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state 值 说明 animation-name 指定要绑定到选择器的关键帧的名称 animation-duration 动画指定需要多少秒或毫秒完成 animation-timing-function 设置动画将如何完成一个
CSS3 实现多个动画效果
weixin_34015566的博客
09-07 1130
利用 CSS3 实现动画效果 内容 皮球掉地上反弹起来 纯 CSS 实现 gif 效果 图片移动 实现打字输入效果 效果 // html <div class="ball"></div> //css @keyframes bounce { 60%, 80%, to { transform: tran...
CSS3利用animation动画实现多个图标在指定间隔后再次动作
ALeeYaaaa的博客
12-03 1154
一、实现思路： 当有多个图标要实现同一 animation ，但是每个图标的 animation 又不能互相干扰，可以利用以下这个公式去设置动画的属性 @keyframes 动画名称 选择百分比实现 @keyframes 动画名称 { 0% { // 具体动画实现效果 } （1 / 总共要实现动画的元素个数）% { // 恢复的正常状态 } 100% { // 恢复的...
CSS3 一个元素执行多个动画CSS写法
輕描淡寫的博客
03-08 8441
    -webkit-animation-name:bounceInLeft1, bounce1;    -webkit-animation-duration:2s, 1.5s;    -webkit-animation-timing-function:ease, linear;    -webkit-animation-delay:5.2s, 7.2s;    -webkit-animatio...
css如何实现多个动画顺序播放
qq_33859479的博客
05-05 1807
关键在于下一个动画的delay值 = 上一个动画播放后的delay值 + 上一个动画播放的持续时长。对于两个动画，可参照上段代码实现两个动画连续播放。多个动画按照这个以此类推。
CSS3 动画
qq_61601160的博客
12-06 189
文章目录1.@keyframes 规则2.属性animation-name3.属性animation-duration4.属性animation-delay5.属性animation-iteration-count6.属性animation-direction7.属性animation-timing-function8.属性animation-fill-mode应用举例：自动播放的轮播图 1.@keyframes 规则 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样
CSS3中Animation动画属性用法详解
09-24
`animation`属性是一个复合属性，可以一次性设置多个与动画相关的属性，包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-...
CSS3动画效果回调处理详解
12-13
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？ CSS3动画也是可以做回调处理的...
CSS3样式表-CSS3动画.pptx
05-06
`animation`属性是一个简写属性，可以同时设置多个动画相关属性，包括但不限于`animation-name`、`animation-duration`。例如： ```css element { animation: change 5s; } ``` 这里的`change`是之前定义的动画...
CSS3基础动画详解
12-18
【CSS3基础动画详解】 CSS3的动画功能使得网页元素的动态效果变得极其丰富和灵活。这个主题将深入讲解CSS3动画的基础知识，包括如何创建和应用动画，以及理解关键帧的概念。 首先，CSS3动画的核心是通过`@...
CSS3-animation（动画）_Animation_css_
10-03
2. **animation 属性**: 用于应用动画，它是一个复合属性，包括多个子属性，如 animation-name、animation-duration、animation-timing-function 等。例如： ```css element { animation-name: example; ...
HTML5动画实战——元素进入并给一个元素设置两个动画
是光の谢宣骞博客
12-27 859
一个小demo，帮助你开发~
animation给同一个元素加多个动画
最新发布
Wangdr的博客
03-06 488
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用。元素从右向左渐变滑入，然后再上下漂浮。animation动画可连写。
CSS-三角形的div框框
LuckyGuyy的博客
11-28 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css3 动画animation 及@keyframes 规则
weixin_52140964的博客
10-10 715
css3 动画animation 及@keyframes 规则
CSS3帧动画总结
chen__cheng的博客
05-15 940
CSS3帧动画总结1. 关键帧1.1 定义多个帧动画1.1.1 相同动画时间1.1.2 不同动画时间2. 重复动画3. 动画方向4. 动画延迟5. 动画速率5.1 平滑动画5.2 步进动画6. 播放状态7. 填充模式8. 组合写法 帧动画通过定义一段动画中的关键点、关键状态来创建动画。 transition虽然也有对帧的控制，但是控制粒度往往比较大，其主要是对一个变化过程，比如：宽度/背景变化过程中，设置变化时间/速度以及在哪开始变化。虽然里面也有类似于帧的transition-timing-functio
vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；
weixin_44011751的博客
07-21 6511
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交; 前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式 效果图如下: 答题前显示: 当我答题了以后,题号对应显示该题答题状况: 此时点击提交按钮,提示"未打完,请继续答卷": 完整答题提示: 基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了 最后上代码,
css3动画-animation各个属性详解
06-28
### 回答1： CSS3动画是一种非常强大的动画技术，它可以让网页变得更加生动、美丽。本文将为大家详细介绍CSS3动画的各个属性，包括动画名称，持续时间，延迟时间，动画速度曲线，以及动画的执行次数等。 动画名称（animation-name）：与CSS中的类似，动画名称是指定CSS3动画所使用的关键帧动画。这个属性用来指定一个已定义的动画名称，以便调用该动画。 持续时间（animation-duration）：定义CSS3动画的持续时间。默认值为0，表示没有动画效果。通过使用单位“秒（s）”或“毫秒（ms）”来定义动画的持续时间。 延迟时间（animation-delay）：指定动画开始前的等待时长。默认值为0，即动画将立即开始。通过使用单位“秒（s）”或“毫秒（ms）”来定义延迟时间。 动画速度曲线（animation-timing-function）：定义动画的速度曲线，可以使动画有更加自然的过渡效果。使用缓动函数可以让动画更具有灵活性，可以在不同的时间点采用不同的速度曲线，从而实现更复杂的动画效果。 动画执行次数（animation-iteration-count）：指定动画的执行次数。可以使用数字或者“infinite”关键字来指定动画的执行次数。如果将其设置为“infinite”则表示动画将一直持续执行下去。 动画方向（animation-direction）：指定动画是否循环播放，并且指定循环播放的方向。这个属性可以使用以下值：normal，reverse，alternate和alternate-reverse。 动画填充模式（animation-fill-mode）：指定动画在开始或结束时对元素的样式应该如何处理。使用这个属性可以让动画具有更加平滑的效果，可以避免由于动画结束时样式的改变而造成的过度影响。 总之，通过使用上述属性，我们可以为网页添加各种丰富的动画效果，让网页更加互动、生动，也更能吸引用户的眼球。 ### 回答2： CSS3动画是网页开发中非常常用的一种技术，通过使用动画属性可以给页面的元素增添动态的效果。本文将详细介绍CSS3动画的各个属性。 1. animation-name 该属性定义要绑定到要执行动画的@keyframes的名称。@keyframes是定义动画的关键帧的规则集合。 2. animation-duration 该属性定义了动画完成所需的时间，以秒或毫秒为单位。 3. animation-timing-function 该属性定义了动画执行的时间曲线。通过使用不同的时序函数，可以使动画更真实，更有质感。 4. animation-delay 该属性定义动画开始之前的延迟时间，以秒或毫秒为单位。 5. animation-iteration-count 该属性定义动画的迭代次数。可以将其设置为有限或无限。 6. animation-direction 该属性定义动画是否反向播放。 7. animation-fill-mode 该属性定义了元素在动画之前和之后的状态。可以设置为none、forwards、backwards或both。 8. animation-play-state 该属性定义动画的运行状态。可以将其设置为paused或running。 9. animation animation属性是所有动画属性的缩写。它接受每个属性的值作为逗号分隔列表。 总结： 上述就是CSS3动画常用属性的详细介绍。CSS3动画可以用来为页面增添动态效果，提高用户的交互体验。在实际开发中，可以通过不同的动画属性以及不同的取值方式，创建出各种不同的动画效果。在制作动画时，需要考虑兼容性问题，如果要兼容IE9及以下版本，我们还需要使用Vendor Prefix前缀来避免浏览器的兼容问题。 ### 回答3： CSS3动画是将元素从一个状态变换到另一个状态的方式，其中使用了一些简单的CSS属性。CSS3动画属性可以通过@keyframe规则或transition属性设置。它们可以用来创造一些很棒的效果，比如向上滚动的标题、浮动的按钮等。下面详细介绍一下CSS3动画涉及的各种属性。 1. animation-name：用来定义动画的名称，这个名称会由animation属性引用。 2. animation-duration：定义动画的持续时间。单位为秒（s）和毫秒（ms）。 3. animation-timing-function：定义动画的速度变化曲线。这个属性定义了过渡的速度，是一个三次贝塞尔函数。可以设置ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier等值。 4. animation-delay：定义动画开始之前的延迟时间。单位为秒（s）和毫秒（ms）。 5. animation-iteration-count：定义动画的重复次数。可以设置为一个具体的数字或infinite表示无限次重复。 6. animation-direction：定义动画结束后是否负向重复播放。可以设置为normal、reverse、alternate和alternate-reverse。 7. animation-play-state：定义动画是运行还是暂停。可以设置为paused和running。 8. animation-fill-mode：定义动画结束后如何应用样式。可以设置为none、forwards、backwards和both。 以上是CSS3动画中涉及的主要属性。其中最重要的要数animation-iteration-count和animation-duration两个属性。animation-iteration-count可以定义动画的重复次数，也可以设置为infinite表示无限次重复。animation-duration用来定义动画的持续时间，如果不设置，默认值为0，此时动画是不会播放的。在设置这两个属性时，需要根据具体情况来确定合适的数值，以达到最佳的动画效果。 总的来说，CSS3动画提供了丰富的效果和属性，可以应用于页面中的各种元素和功能，让页面更加生动、美观、时尚。在开发过程中，合理应用这些属性，可以使前端开发变得更加有趣和富有挑战性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值