CSS:过渡动画 (Transition)与关键帧动画(Keyfram)

一、过渡动画 (Transition)

1.简单介绍

Transition能为样式的变化提供过渡效果,例如在下面的代码中:

    .main {width: 300px;height: 100px;background-color: #d26f6f;}.main:hover {width: 300px;height: 200px;background-color: #5e3e3e;transition: all 1s;}

div会在鼠标移动到上面后逐渐从高100px变为高200px,而不会瞬间改变,更加丝滑。

2.使用方法

可以将所有属性写在一起,如:

transition: property duration timing-function delay;

也可以将属性分开写,如:

transition-property 指定CSS属性的name,比如说transform,也可以简单的all

transition-duration 动画效果的时间

transition-timing-function  指定transition效果的转速曲线

transition-delay  定义transition效果开始的时候

3.部分支持动画的属性

下面列举了一部分支持过度动画的CSS属性,更详细信息请查阅相关文档。 

opacity(透明度)

transform(变形,包括旋转、缩放、移动和倾斜等)

color(颜色)

background-color(背景颜色)

width 和 height(尺寸大小)

margin、padding、border-width(边距、内填充和边框宽度)

top, right, bottom, left(定位属性,当元素是相对定位、绝对定位或固定定位时)

font-size(字体大小)

outline-color、outline-width(轮廓颜色和宽度)

box-shadow(阴影效果)

background-position(背景图像位置)

border-radius(边框半径)

filter(滤镜效果,如模糊、灰度等)

clip-path(裁剪)

二、关键帧动画(Keyfram)

1.简单介绍

关键帧动画能够设置多个不同时间的不同样式来实现比过渡动画更为复杂的动画。例如在下面的代码中:

   .main {width: 300px;height: 100px;background-color: #67efd4;font-size: 16px;}.main:hover {animation: 2s infinite changeDiv;}@keyframes changeDiv {0% {width: 300px;height: 100px;background-color: #67efd4;}20% {width: 30px;height: 20px;background-color: #5ad344;}80% {width: 300px;height: 200px;background-color: #b0396f;}100% {width: 30px;height: 200px;background-color: #acd2a5;}}

Div会在2s内的不同阶段变成不同点状态,并具有过渡效果。

定义关键帧动画除了百分比,也可以使用from/to

   @keyframes changeDiv {from {width: 300px;height: 100px;background-color: #67efd4;}to {width: 30px;height: 200px;background-color: #acd2a5;}}

2.使用方法

可以将所有属性写在一起,如:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

也可以将属性分开写,如:

animation-name  @keyframes 动画的名称

animation-duration  动画完成一个周期所花费时间,

animation-timing-function 动画的速度曲线

animation-fill-mode 动画不播放时的样式。  

animation-delay 规定动画何时开始。

animation-iteration-count 规定动画被播放的次数。

animation-direction 规定动画是否在下一周期逆向地播放。

animation-play-state  规定动画是否正在运行或暂停。

3.关键帧属性的值

属性名称意义
animation-name@keyframes 动画的名称自定义一个名字
animation-duration动画完成一个周期所花费时间一个时间,例如5s,500ms,默认0
animation-timing-function动画的速度曲线

ease(默认):慢-快-最后慢

ease-in:加速

ease-out::减速

ease-in-out:慢-快-慢

自定义贝塞尔曲线 :例如ubic-bezier(0.8, 0, 0.2, 1)

animation-fill-mode动画不播放时的样式

none (默认): 动画结束后,元素会恢复到动画开始前的状态

forwards: 动画结束后,元素将保持在动画最后一个关键帧所设置的状态。

backwards: 如果动画是在元素显示后立即开始,则会在动画开始前应用第一个关键帧的样式。

both: 结合了 forwards 和 backwards 的效果。元素将在动画开始前应用首个关键帧的样式,并在动画结束后保持在最后一个关键帧的样式。

animation-delay规定动画何时开始一个时间
animation-iteration-count规定动画被播放的次数

整数值(默认1),表示动画播放的具体次数。

 infinite,表示动画应该无限重复播放。

animation-direction规定动画是否在下一周期逆向地播放

normal:动画按正常顺序播放

reverse:动画反向播放

alternate:动画在奇数次正常播放,在偶数次反向播放

alternate-reverse:动画在奇数次反向播放,在偶数次正常播放

animation-play-state规定动画是否正在运行或暂停

running:动画正常播放

paused:动画暂停

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

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

相关文章

语义分割前言

1.常见数据集 1.1PASCAL VOC 其标注图片为单通道图像,其0~255像素值为其取值范围,背景为0,目标区域内根据目标的类别索引信息进行填充。 1.2MS COCO 其标注图像的标注文件为坐标信息。 官网有给出一个关于标注文件的格式说明&#xff0…

数字信封

一、概念 数字信封是将对称密钥通过非对称加密(即:有公钥和私钥两个)的结果分发对称密钥的方法。数字信封是实现信息保密性验证的技术。 二、过程描述 在数字信封中,信息发送方采用对称密钥来加密信息内容,然后将此…

考虑源荷随机特征的热电联供微网优化(含matlab程序)

目录 一、前言 二、含可再生能源的CHP型微网系统 三、CCP理论 四、具体模型 五、不含随机变量分析的matlab程序设计 1.粒子群寻优功能代码段 2.目标函数子程序 3.其他代码段 六、基于CCP的粒子群优化程序 1.含随机变量的约束条件处理 2.随机变量生成 3.置信水平检验部…

知识点回顾梳理之Linux常用指令

文章目录 🐒个人主页:信计2102罗铠威🏅JavaEE系列专栏📖前言: 🎀点击这里:Linux命令大全入口🎀Linux的目录结构🐕文件作用🪀Linux常用命令🎀关机 …

在IDE中配置tomcat服务器

目录 一、新建一个java项目二、添加web框架三、配置tomcat服务器四、运行访问发布的项目 前言:在 IntelliJ IDEA 中配置 Tomcat 服务器是 Java Web 开发的基础步骤,以下是如何在 IDEA 中设置 Tomcat 并部署 Web 项目的简要指南。 一、新建一个java项目 新…

用两个栈实现简单的四则运算

题目要求:给定一个字符串如“12*3”,没有括号,要求利用栈的知识来处理结果算出答案 我的思路:建立两个栈,一个存放数据,一个存放符号,再定义一个结构体做为操作的主体,然后制作几个函数&#x…

[蓝桥杯]-最大的通过数-CPP-二分查找、前缀和

目录 一、题目描述: 二、整体思路: 三、代码: 一、题目描述: 二、整体思路: 首先要知道不是他们同时选择序号一样的关卡通关,而是两人同时进行两个入口闯关。就是说两条通道存在相同关卡编号的的关卡被通…

大一专科,物联网专业,变态成长偏方!

最近看到一个大一,物联网专业的学生提问: 印象中,物联网专业2011年才有的,正好是我毕业那年。 我大概看过物联网专业要学的内容,总结下来就是,比软件不如计算机,比硬件知识不如电子。 不知道老师…

3.15作业

什么是IP地址:IP地址的作用是在网络中唯一标识和定位设备 IP地址和MAC地址的区别:IP地址是逻辑地址,网络层标识设备,可以更改,是全球互联网的唯 一 标识 MAC地址是物…

已解决:android SDK安装时点击SDK Manager出现闪退

1、首先确保电脑里边安装了JDK,并且要把安装路径配置在环境变量里边,避免使用绝对路径 推荐%JAVA_HOME%\bin 2、在C:\Users\huanhuan\Desktop\android-sdk-windows\tools路径下找到android.bat文件打开,把set java_exe后改为jdk中java.exe的路…

Day40-45 网络高级(modbus)

文章目录 Modbus起源1.起源:2.分类:3.优势:4.应用场景:5.ModbusTCP特点: Modbus TCP协议格式1.报文头2.寄存器3.功能码 工具软件使用.Modbus Slave&Poll2.网络调试助手.Wireshark的使用 Modbus RTU1、与Modbus TCP…

阴阳四象八卦_学习笔记

个人学习笔记,自行斟酌阅读 太极 阴中有阳,阳中有阴 阴阳 太极生两仪 符号阴⚋阳⚊ 个人理解: 一划为天,中间为太阳,看得见为阳,看不见为阴 四象 两仪生四象 符号符号解释阴阳少阳⚎晨时,天热地冷…

对服务划分,服务治理,服务分层的理解

服务划分是指将一个大型应用系统拆分为多个独立的服务,每个服务负责完成特定的业务功能。服务划分的目的是提高系统的可扩展性、可维护性和可测试性,同时也便于团队协作和开发效率。 服务治理是指对微服务架构中的服务进行管理和监控,确保服务…

Google Play上架:谷歌支付政策变更

目录 政策发布时间概括内容付款政策变动内容归纳google付款用户政策政策发布时间 2024 年 3 月 6 日 概括内容 为遵守《数字市场法案》(DMA) 的规定,从 2024 年 3 月 6 日起,我们将更新付款政策,允许开发者将欧洲经济区 (EEA) 的用户引导至其应用之外的平台(包括推广应用…

YUNBE云贝-PostgreSQL Vacuum详解:深入理解与实践

引言 PostgreSQL作为一款功能强大、开源的关系型数据库管理系统,其性能优化机制中,“VACUUM”命令扮演着至关重要的角色。本文将对PostgreSQL的VACUUM操作进行全面解析,探讨其工作原理、类型以及如何在实际环境中合理应用。 一、VACUUM基础概…

视频监控汇聚管理系统EasyCVR平台RTMP推流异常是什么原因?

AI视频智能分析/视频监控管理平台EasyCVR能在复杂的网络环境中(专网、内网、局域网、广域网、公网等),支持设备通过4G、5G、WIFI、有线等方式接入,并将设备进行统一集中接入与视频汇聚管理,经平台接入的视频流能实现多…

字符串的排列(LeetCode 567)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路4.1 滑动窗口4.2 双指针 参考文献 1.问题描述 给你两个字符串 s1 和 s2 ,写一个函数来判断 s2 是否包含 s1 的排列。如果是,返回 true ;否则,返回 false 。 换句话说&#xf…

MySQL8.0导入与导出

一、into outfile导出 1、语法: select * from employees ORDER BY lname LIMIT 1000INTO OUTFILE /tmp/employee_data_1.txtFIELDS TERMINATED BY , OPTIONALLY ENCLOSED BY ", ESCAPED BY \LINES TERMINATED BY \n; FIELDS TERMINATED BY 表示列分隔符 [OP…