css3动画的三种实现方式

目录

    • 一、是什么
    • 二、实现方式
      • transition 实现渐变动画
      • transform 转变动画
      • animation 实现自定义动画
    • 三、总结
    • 参考文献

一、是什么

CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块

即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多,如平移、旋转、缩放等等,复杂动画则是多个简单动画的组合

css实现动画的方式,有如下几种:

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

二、实现方式

transition 实现渐变动画

transition的属性如下:

  • property:填写需要变化的css属性
  • duration:完成过渡效果需要的时间单位(s或者ms)
  • timing-function:完成效果的速度曲线
  • delay: 动画效果的延迟触发时间

其中timing-function的值有如下:

描述
linear匀速(等于 cubic-bezier(0,0,1,1))
ease从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in慢慢变快(等于 cubic-bezier(0.42,0,1,1))
ease-out慢慢变慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),渐显渐隐效果
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

注意:并不是所有的属性都能使用过渡的,如display:none<->display:block

举个例子,实现鼠标移动上去发生变化动画效果

<style>.base {width: 100px;height: 100px;display: inline-block;background-color: #0EA9FF;border-width: 5px;border-style: solid;border-color: #5daf34;transition-property: width, height, background-color, border-width;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 500ms;}/*简写*//*transition: all 2s ease-in 500ms;*/.base:hover {width: 200px;height: 200px;background-color: #5daf34;border-width: 10px;border-color: #3a8ee6;}
</style>
<div class="base"></div>

transform 转变动画

包含四个常用的功能:

  • translate:位移
  • scale:缩放
  • rotate:旋转
  • skew:倾斜

一般配合transition过度使用

注意的是,transform不支持inline元素,使用前把它变成block

举个例子

<style>.base {width: 100px;height: 100px;display: inline-block;background-color: #0EA9FF;border-width: 5px;border-style: solid;border-color: #5daf34;transition-property: width, height, background-color, border-width;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 500ms;}.base2 {transform: none;transition-property: transform;transition-delay: 5ms;}.base2:hover {transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);}
</style><div class="base base2"></div>

可以看到盒子发生了旋转,倾斜,平移,放大

animation 实现自定义动画

animation是由 8 个属性的简写,分别如下:

属性描述属性值
animation-duration指定动画完成一个周期所需要时间,单位秒(s)或毫秒(ms),默认是 0
animation-timing-function指定动画计时函数,即动画的速度曲线,默认是 “ease”linear、ease、ease-in、ease-out、ease-in-out
animation-delay指定动画延迟时间,即动画何时开始,默认是 0
animation-iteration-count指定动画播放的次数,默认是 1
animation-direction 指定动画播放的方向默认是 normalnormal、reverse、alternate、alternate-reverse
animation-fill-mode指定动画填充模式。默认是 noneforwards、backwards、both
animation-play-state指定动画播放状态,正在运行或暂停。默认是 runningrunning、pauser
animation-name指定 @keyframes 动画的名称

CSS 动画只需要定义一些关键的帧,而其余的帧,浏览器会根据计时函数插值计算出来,

通过 @keyframes 来定义关键帧

因此,如果我们想要让元素旋转一圈,只需要定义开始和结束两帧即可:

@keyframes rotate{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}

from 表示最开始的那一帧,to 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}
}

定义好了关键帧后,下来就可以直接用它了:

三、总结

属性含义
transition(过度)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
transform(变形)用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”
translate(移动)只是transform的一个属性值,即移动
animation(动画)用于设置动画属性,他是一个简写的属性,包含6个属性

参考文献

  • https://segmentfault.com/a/1190000022540857
  • https://zh.m.wikipedia.org/wiki/CSS%E5%8A%A8%E7%94%BB
  • https://vue3js.cn/interview

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/666046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式session 笔记

概念 解决方案‘ 复制 session同步&#xff0c;让集群下的服务器进行session同步&#xff0c;一种传统的服务器集群session管理机制&#xff0c;常用于服务器不多的集群环境。<br /> 集群下&#xff0c;进行session同步的服务器的session数据是相同的&#xff0c;…

Redis面试题39

人工智能如何在交通领域发挥作用&#xff1f; 答&#xff1a;人工智能在交通领域发挥着重要的作用&#xff0c;可以改善交通效率和安全性。以下是一些人工智能在交通领域的应用示例&#xff1a; 交通流量优化&#xff1a;人工智能可以通过分析实时交通数据、监控摄像头图像和传…

【JavaScript 漫游】【007】数据类型转换

文章简介 本文为【JavaScript 漫游】专栏的第 007 篇文章&#xff0c;对 JS 数据类型转化语法进行了简记。 数据类型的转换指的是将 JS 的某一数据类型的值转换为 JS 的某一原始数据类型的值&#xff0c;也就是 number、string 和 boolean。 Number 方法强制转换为 number 类…

信创系统软件开发环境搭建(QT篇)

信创系统软件开发环境搭建&#xff08;QT篇&#xff09; 前言Ubuntu 版本选择QT 版本选择Ubuntu 开发相关软件安装问题 前言 信创系统&#xff0c;包括统信 UOS 和麒麟系统都是基于 Linux 系统开发&#xff0c;所以要开发信创系统软件&#xff0c;优选 Linux 系统。而 Linux 系…

鲜花销售|鲜花销售小程序|基于微信小程序的鲜花销售系统设计与实现(源码+数据库+文档)

鲜花销售小程序目录 目录 基于微信小程序的鲜花销售系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、前台功能模块 2、后台功能模块 (1) 后台登录 (2) 管理员功能模块 用户管理 商家管理 鲜花信息管理 鲜花分类管理 管理员管理 系统管理 (3) 商家功…

2017年苏州大学837复试机试C/C++

2017年苏州大学复试机试 要求 要求用C/C编程&#xff1b;对程序中必要的地方进行注释。上机规则 请在电脑桌面上新建一个文件夹文件夹名为考试姓名&#xff08;中文&#xff09;&#xff1b;考试完毕后&#xff0c;将所编写的文件放在上述文件中。 第一题&#xff08;20分&…

CSS的元素显示模式

一&#xff0c;什么是元素显示模式 元素显示模式是指元素以什么方式显示&#xff0c; 作用&#xff1a;了解不同类型的标签可以更好的布局网页。 HTML元素一般分为块元素和行内元素。 1.1块元素 常见的块元素有&#xff1a;<p><ul><ol><li>,<di…

window 搭建 Flutter for Android的环境(二)

最近又重置了笔记本系统&#xff0c;因此又得重新部署Flutter环境&#xff0c;所以就再重新整理了一下&#xff1a; 下载安装好Android、git下载安装好对应版本的Flutter 下载地址:部署环境变量&#xff1a; ANDROID_HOME C:\Users\Administrator\AppData\Local\Android\SdkC:…

winserver2012远程黑屏且无法操作

当我们遇到远程windows服务器发现GUI图形加载异常&#xff0c;黑屏显示&#xff0c;且无法进行任何操作&#xff0c;我们可以尝试以下方法。 1.尝试远程命令重启 #11.11.11.11 远程服务器ip #Administrator 远程桌面用户名 #12345678 密码 #shutdown.exe -r -f 在一分钟…

【计算机网络】HTTPS协议原理

文章目录 一、相关基础概念1.HTTPS 是什么2.什么是"加密"3.为什么要加密4.常见的加密方式5.数据摘要 && 数据指纹 二、HTTPS 的工作过程 -- 加密方式1.只使用对称加密2.只使用非对称加密3.双方都使用非对称加密4.非对称加密 对称加密5.中间人攻击6.证书7.非…

力扣144 二叉树的前序遍历 Java版本

文章目录 题目描述递归方法代码 非递归方法代码 题目描述 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xf…

ElementUI Data:Table 表格

ElementUI安装与使用指南 Table 表格 点击下载learnelementuispringboot项目源码 效果图 el-table.vue&#xff08;Table表格&#xff09;页面效果图 项目里el-table.vue代码 <script> export default {name: el_table,data() {return {tableData: …

蓝桥杯省赛无忧 数位DP 课件78 数位DP

01 算法概述 02 问题引入 03 算法分析 04 例题

《QDebug 2024年1月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Repeator 的 delegate 在 remove 移除时的注意事项 Qt Bug Tracker&#xff1a;https://bugreports.qt.io/browse/QTBUG-47500 Repeator 在调用 remove 函数之后&#xff0c;对应的 Item 会立即释放&#xff0c;后续就…

如何基于文档的内容实现 AI 对话功能,以 Documate 为例

前言 在 ChatGPT 出现之时&#xff0c;社区内也出现过 把 React 官方文档投喂给它 &#xff0c;然后对它进行提问的实践。但是&#xff0c;由于每次 ChatGPT 对话能接受的文本内容对应的 Token 是有上限的&#xff0c;所以这种使用方式存在一定的手动操作成本和不能复用的问题…

Linux eject命令教程:如何安全地弹出你的设备(附实例详解和注意事项)

Linux eject命令介绍 eject命令在Linux中用于弹出可移动设备。这通常是光盘&#xff0c;但也可以是软盘&#xff0c;磁带&#xff0c;或JAZ或ZIP磁盘。此命令还可以控制一些多碟CD-ROM切换器&#xff0c;一些设备支持的自动弹出功能&#xff0c;以及关闭一些CD-ROM驱动器的光盘…

使用Ettus USRP X440对雷达和EW系统进行原型验证

概览 无论是保障己方平台的生存能力&#xff0c;还是扰乱敌方频谱使用&#xff0c;以电磁(EM)频谱为主导都是任务成功的主要因素。电磁频谱操作(Electromagnetic Spectrum Operation, EMSO)需要使用战术系统来监测敌方的频谱活动、定位其发射器并帮助己方制定行动计划。软件无…

新 Ubuntu 14.04 服务器的基本配置

简介 在为新服务器设置最低配置之后&#xff0c;大多数情况下都建议进行一些额外的步骤。在本指南中&#xff0c;我们将继续配置我们的服务器&#xff0c;处理一些推荐但可选的程序。 先决条件和目标 在开始本指南之前&#xff0c;您应该先运行 Ubuntu 14.04 初始服务器设置…

离散数学——特殊关系(笔记及思维导图)

离散数学——特殊关系&#xff08;笔记及思维导图&#xff09; 笔记来自【电子科大】离散数学 王丽杰

DIY制作硬模空心耳机壳使用的是什么原材料?

制作硬模空心耳机壳的原材料可以根据不同的制作要求和材料特性进行选择。以下是一些常见的原材料&#xff1a; 塑料&#xff1a;塑料是一种常用的耳机壳制作材料&#xff0c;具有轻便、耐用、防水等特点。常见的塑料材料包括ABS、PC、PA等&#xff0c;可以根据具体要求进行选择…