CSS动画：transition触发动画和animation非触发动画

已于 2023-05-17 10:30:48 修改
阅读量2.3k 收藏 20
点赞数 2
分类专栏： 前端 Vue 文章标签： css css3 动画
于 2023-03-17 11:02:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Sun88/article/details/129614998
版权
Vue 同时被 2 个专栏收录
10 篇文章 5 订阅
订阅专栏
前端
9 篇文章 0 订阅
订阅专栏
前言
本篇在讲什么

本章学习通过CSS样式表现动画
本篇适合什么

适合初学H5的小白
适合初学CSS的小白
适合入门的前端程序
本篇需要什么

对Html和css语法有简单认知
Node.js(博主v18.13.0)的开发环境
Npm(博主v8.19.3)的开发环境
依赖VS code编辑器
本篇的特色

具有全流程的图文教学
重实践，轻理论，快速上手
提供全流程的源码内容

★提高阅读体验★

👉 ♠ 一级标题 👈

👉 ♥ 二级标题 👈

👉 ♣ 三级标题 👈

👉 ♦ 四级标题 👈

目录

♠ 触发型动画

本章节学习通过transition样式执行一些触发型的动画，比如悬停后的变换等

♥ transition动画

css中我们可以通过transition实现一些动画的效果，下面我们看一下怎么使用

♣ transition的属性

字段功能
transition-property变换的CSS属性
transition-duration变换的时间
transition-timing-function变换过程的曲线
transition-delay变换前的延迟

♣ 使用方式

  • 使用方式1
transition :width 0.2s ease-in 1s;

属性+时间+曲线+延迟

  • 使用方式2
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay:1s;

四个属性全部列出来

  • 使用方式3
transition: all 1s ease-in 1s

所有属性都变换，all+时间+曲线+延迟

♣ 使用演示

这一模块我们通过演示示例，来展示transition的用法，首先我们创建一个按钮，在网页中间，代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>

在这里插入图片描述

♦ 位置变换

通过transform: translate(xx)来设置按钮悬停时候的位置变化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
        }
        .btn:hover{
            transform: translate(45px);
            transition: all 1s ease;
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>
♦ 角度变换

通过transform: rotate(xx)来设置按钮悬停时候的位置变化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
        }
        .btn:hover{
            transform: rotate(360deg);
            transition: all 1s ease;
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>
♦ 缩放变换

通过transform: scale(xx)来设置按钮悬停时候的大小变化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
        }
        .btn:hover{
            transform: scale(0.5);
            transition: all 1s ease;
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>
♦ 颜色变换

通过background-color来设置按钮悬停时候的颜色变化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
        }
        .btn:hover{
            background-color: #e54611;
            transition: all 1s ease;
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>

很简单也很实用，css的属性都可以通过transition来变换，宽度、颜色等等的

♠ 非触发动画

我们经常需要组件自动去做一些动画效果，为此我们需要用到animtion动画，animation动画是通过定义特殊字段@keyframes书写的动作结构，再通过animation限定的结构执行的

♥ animation动画

css中我们可以通过animation实现一些自动执行的动画效果，下面我们看一下怎么使用

♣ animation的属性

字段功能
animation-name@keyframes定义的动画名
animation-duration执行事件
animation-timing-function执行的缓动曲线
animation-delay执行前的延迟
animation-iteration-count动画的播放次数
animation-direction执行方式
animation-play-state执行状态
animation-fill-mode填充模式
♦ animation-iteration-count类型
  • 默认：1
  • infinite：无限循环
♦ animation-direction类型

  • normal：默认，正常

  • reverse：反向运动

  • alternate：正反轮播

  • alternate-reverse：反向播放后，恢复到初始状态

♦ animation-play-state类型

  • running：默认，正常运行

  • paused：暂停动画

♦ animation-fill-mode类型

  • none：默认，执行后恢复到原状态

  • forwards：执行完保持结束状态

  • backwards：延时前永远保持动画初始状态

♦ animation-timing-function类型
值描述
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

♣ 使用方式

♦ @keyframes
  • @keyframes方式1
@keyframes test1{
    from{
        transform: rotate(60deg)
    }
    to{
        transform: rotate(360deg)
    }
}

关键字@keyframes+动画名
对象from下写css的属性，意味初始状态
对象to下写css的属性，意味结束状态

  • @keyframes方式2
@keyframes test2{
    0% {
        transform: rotate(60deg)
    }
    50% {
        transform: rotate(160deg)
    }
    100% {
        transform: rotate(260deg)
    }
}

关键字@keyframes+动画名
百分数指动画的执行进度，50%在动画执行一半时达到的状态

  • @keyframes方式3
@keyframes test3{
    0% {
        transform: rotate(60deg)
    }
    50% {
        transform: rotate(160deg)
    }
    to{
        transform: rotate(360deg)
    }
}

方式1和方式2可以混用

  • animation执行方式1
animation-name: test1;
animation-duration: 2s;
animation-dela：1s;
animation-iteration-count: infinite;

animation属性字段+参数

  • animation执行方式2
animation: test1 2s 1s infinite;

animation:参数

♣ 使用演示

以下我们通过代码和演示制作几个可以自动执行的动画

♦ 自动旋转

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
            animation: test 2s infinite;
        }
        @keyframes test{
            0% {
                transform: rotate(0deg)
            }
            50% {
                transform: rotate(160deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>
♦ 透明闪烁

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .btn{
            width: 200px;
			height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
            animation: test 1s infinite;
        }
        @keyframes test{
            0% {
			    opacity:0;
            }
            50% {
                opacity:1;
            }
            100% {
                opacity:0;
            }
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>

♠ 推送

  • Github
https://github.com/KingSun5

♠ 结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。

👉 本文属于原创文章，转载请评论留言，并在转载文章头部著名作者出处👈
因吹斯听的Sun同学
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【瑞模网】Unity动画触发方法总结
rrmod的博客
02-10 720
但是hashid也需要通过StateName来得到：int stateHash = Animator.StringToHash( stateName );这种情况需要在动画播放完毕后，将animator所在 gameobject设置为 inactive；要写成Animator.Play(“StateName”,0,0);Animator.settrigger： 这种方法需要在animator里自己添加状态转移参数。这种方法希望在动画播放完之后通过回调函数，将gameobject设置为false；
css 实现点击动画
PrimaryColor
08-14 2482
.move:active{ animation: heartBeat 2s; }
Core Animation演示
weixin_34160277的博客
07-09 53
相关代码展示： - (IBAction)toggleRoundCorners:(id)sender { [CATransaction setDisableActions:![_enableAnimations isOn]]; [CATransaction setAnimationDuration:_animationDuration]; ...
纯CSS实现点击动画
小多的博客
08-30 6023
暂不推荐该方法，a标签会跳转页面，且不能直接第二次点击取消样式，需要设置href和id。：点击label内部文本可以触发该控件，实现点击选择框或文字都可以出现动画效果。＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。选择器可用于当前活动的target元素的样式。属性实现选中未选择变化。...
Raft动画演示
varinic 的博客
01-17 2427
分享一个Raft动画演示网站：     http://thesecretlivesofdata.com/raft/ 包括 选举（Leader Election）、复写（log replication）、分区（partition）
CSS3中的Transition过度与Animation动画属性使用要点
12-13
在CSS3中，Transition（过渡）和Animation（动画）是两个强大的特性，它们极大地丰富了网页的视觉表现力。Transition允许元素的CSS属性值在特定事件触发时平滑过渡，而Animation则允许创建复杂的自定义动画序列。 ...
滚动触发css3动画
05-25
4. **CSS3的过渡（transition）**：虽然标题提到的是动画，但过渡也是与滚动触发效果相关的另一个重要概念。过渡允许元素在特定属性变化时平滑地改变状态。例如： ```css .myElement { transition: opacity 0.5s ...
CSS3 Animation文字动画特效.zip
07-11
这些动画特效的实现都基于HTML结构和CSS3的动画规则，通常会结合使用伪类（如:hover、:active）来触发特定的动画效果，或者通过JavaScript事件监听器来响应用户交互。 为了应用这些特效，你需要将对应的CSS类添加到...
网站触发性动画效果适合H5
03-17
这种效果可以通过JavaScript库，如Wow.js（压缩包中的wow.min.js）实现，它结合了Animate.css的动画和页面滚动检测，当元素进入视口时触发动画。 4. **animate.css**：这是一个流行的开源CSS动画库，包含各种预定义...
CSS —— 动画animation
m0_69059702的博客
07-30 312
前半部分针对动画的实现和调用，以及其他属性的介绍，后半部分用奔跑的小人来练习动画。
js条件下多次触发同一个css3动画的解决方案demo
09-18
js条件下多次触发同一个css3动画的解决方案demo，配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo，配合blog一起使用。
CSS 实现按钮点击动效的套路
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-19 3681
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌特殊或者满足特殊功能，可能需要给按钮添加一点点击动效。比如，用...
html触发条件,如何触发css3动画
weixin_29002935的博客
06-05 1062
如何触发css3动画1、可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发。#aaa {width: 100px;height: 100px;background: blue;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s;...
用css实现简单的点击按钮动态效果
Howl1234的博客
03-20 1465
用css实现简单的点击按钮动态效果
制作一个点击后的css3动画
wxmmmmmm的博客
06-02 8464
最近做一个动画效果比较多的页面。感觉css3写动画效果比较好用。但是css的动画如何触发呢？首先我们还是应该做一个css动画如图所示，我们就定义了一个名字为appear的动画。但是如果直接把class写在标签上，那么标签加载时就会执行动画。于是我们就需要在js的点击事件中加入这个类。这样就可以在点击时执行想要的动画了！！ps：此动画为设置透明度显示的动画。这个div其实一直都在。所以要个这个div...
css animation 触发,在JavaScript中触发CSS动画
weixin_29453497的博客
08-03 805
我不知道如何使用JQuery，因此我需要一种仅可以使用JavaScript触发动画的方法。当用户滚动页面时，我需要调用/触发CSS动画。function start() {document.getElementById('logo').style.animation = "anim 2s 2s forward";document.getElementById('earthlogo').style....
两种方式实现CSS动画
BYGFJ的博客
10-14 647
实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。 第一种：过渡动画（transition）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS动画之transition</title> <style> /*点击按钮执行动画*/ .transi1{ posit
html animation怎么多次触发,CSS动画之animation再次触发与防止多次触发
weixin_39707201的博客
06-26 1927
上一篇博客记录了animation的介绍,这次记录一下具体的使用。1.再次触发动画可以通过给元素添加类名来触发animation动画，但是需要注意的是再次触发的情况。比如，如果想每次点击鼠标都能重新触发动画，CSS和JS并没有提供这种功能。我们能做的就是要先除去动画的效果，然后让文档重新计算样式，最后将动画效果再次添加到元素上。假定有下面的页面//HTML:Clickmetorunthe...
css动画详解
最新发布
m0_56713342的博客
10-30 1万+
1、使⽤css技术来控制⻚⾯元素css属性的变化。2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）二、过渡1.过渡的理解过渡（transition）[træn'siʒǝn]-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡-需要在某种条件下触发，例如hover、active、focus情况下-⼀次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值。
CSS3过渡与动画实战：创建动态导航效果
- 利用了CSS的浮动和定位属性来控制元素的显示和消失，配合`transition`或`animation`属性调整元素的透明度或位置，实现动画效果。 **代码示例**： ```css /* Reset styles */ reset.css: ... .fllil li { /* 左...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值