当前位置： 首页 > news >正文

【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )

news 2026/3/28 6:03:04

文章目录

  • 一、动画序列
  • 二、代码示例 - 使用 from 和 to 定义动画序列
  • 三、代码示例 - 定义多个动画节点





一、动画序列


定义动画时 , 需要设置动画序列 , 下面的 0% 和 100% 设置的是 动画 在 运行到某个 百分比节点时 的 标签元素样式状态 ;

@keyframes element-move {  0% { transform: translateX(500px); }  100% { transform: translateX(0); }  
}

动画序列 规则 :

  • 0% 是 动画 的 开始状态 ;
  • 100% 是 动画 的 终止状态 ;
  • 使用 百分比 可以 定义 动画样式 变化 的节点 , 也可以使用 from 和 to 关键字 ;
  • 动画 的 初始状态 和 终止状态 的 样式个数 是 任意多个 ;
  • 动画 的 执行次数 是 任意多次 ;




二、代码示例 - 使用 from 和 to 定义动画序列


使用 from 和 to 关键字 定义 动画序列 , 等价于 使用 0% 和 100% 定义的 动画序列 ;


代码示例 :

<!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>定义动画</title><style>div {/* 设置动画的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 设置动画相关样式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定义动画 */from {transform: translateX(500px);}to {transform: translateX(0);}}</style>
</head><body><div></div>
</body></html>

执行结果 :

  • 刚进入页面后 , div 盒子模型出现在右侧 ;
    在这里插入图片描述
  • 1 秒内 , 上述盒子模型会自动走到最左侧 ;
    在这里插入图片描述




三、代码示例 - 定义多个动画节点


使用 0% , 25% , 50% , 75% , 100% 定义的 动画序列 中的 多个 动画节点 ;


代码示例 :

<!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>定义动画</title><style>div {/* 设置动画的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 设置动画相关样式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定义动画 */0% {/* 第一状态 / 默认状态 在左上角 *//* 没有任何变化 也可以空着 */transform: translate(0, 0);}25% {/* 第二状态 走到右上角 */transform: translate(400px, 0);}50% {/* 第三状态 走到右下角 */transform: translate(400px, 200px);}75% {/* 第四状态 走到左下角 */transform: translate(0, 200px);}100% {/* 回到初始状态 *//* 第五状态 走到左上角 */transform: translate(0, 0);}}</style>
</head><body><div></div>
</body></html>

执行效果 : 执行后 , 盒子模型 绕圈走 ;

在这里插入图片描述

相关文章：

【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )

文章目录 一、动画序列二、代码示例 - 使用 from 和 to 定义动画序列三、代码示例 - 定义多个动画节点 一、动画序列 定义动画时 , 需要设置动画序列 , 下面的 0% 和 100% 设置的是 动画 在 运行到某个 百分比节点时 的 标签元素样式状态 ; keyframes element-move { 0% { tr…...

编程日记 2023/8/9 0:30:57

最优化：建模、算法与理论

最优化&#xff1a;建模、算法与理论 目前在学习 最优化&#xff1a;建模、算法与理论这本书&#xff0c;来此记录一下&#xff0c;顺便做一些笔记&#xff0c;在其中我也会加一些自己的理解&#xff0c;尽量写的不会那么的条条框框&#xff08;当然最基础的还是要有&#xff…...

编程日记 2023/8/9 0:29:56

拿捏---＞打印菱形

文章目录 题目描述算法思路代码示例 题目描述 在屏幕上输出以下图案&#xff1a; 算法思路 代码示例 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() {int n;scanf("%d", &n);//上半部分菱形for (int i 0; i < n; i) //上半部分…...

编程日记 2023/8/9 0:28:54

【SpringBoot笔记】定时任务（cron）

定时任务就是在固定的时间执行某个程序&#xff0c;闹钟的作用。 1.在启动类上添加注解 EnableScheduling 2.创建定时任务类 在这个类里面使用表达式设置什么时候执行 cron 表达式&#xff08;也叫七子表达式&#xff09;&#xff0c;设置执行规则 package com.Lijibai.s…...

编程日记 2023/8/9 0:27:53

Redis单机，主从，哨兵，集群四大模式

Redis 单机模式 Redis 单机模式是指 Redis 数据库在单个服务器上以独立的、单一的进程运行的模式。在这种模式下&#xff0c;Redis 不涉及数据分片或集群配置&#xff0c;所有的数据和操作都在一个实例中进行。以下是关于 Redis 单机模式的详细介绍&#xff1a; 单一实例&#…...

编程日记 2023/8/9 0:26:52

2023年8月份华为H12-811更新了

801、[单选题]178/832、在系统视图下键入什么命令可以切换到用户视图? A quit B souter C system-view D user-view 试题答案&#xff1a;A 试题解析&#xff1a;在系统视图下键入quit命令退出到用户视图。因此答案选A。 802、[单选题]“网络管理员在三层交换机上创建了V…...

编程日记 2023/8/9 0:25:51

[K8S：命令执行：权限异常：解决篇]：通过更新kubeconfig配置相关信息

文章目录 一&#xff1a;场景复现&#xff1a;1.1&#xff1a;关键信息&#xff1a;1.2&#xff1a;全异常日志输出&#xff1a; 二&#xff1a;解决流程&#xff1a;2.1&#xff1a;更新 kubeconfig&#xff1a;2.1.1&#xff1a;执行命令&#xff1a; 2.2&#xff1a;再次执行…...

编程日记 2023/8/9 0:24:50

帆软设计器报表加载不出折线图的原因

最近在用帆软设计器做可视化图表。偶有遇到因为数据集的字段类型导致加载不出折线&#xff0c;现记录如下。做报表的同行可以参考。 数据库使用了 Oracle 11g。数据集的 SQL 代码片是之前用在另一个单元格报表里面的。页面上有一个率是直接计算得出&#xff0c;我为了方便、就…...

编程日记 2023/8/9 0:23:47

[QCA6174]sdx12平台WiFi QCA6174在驱动加载的时候增加模块参数方法

需求描述 由于开发需要，有时候需要在驱动模块加载的时候增加一个参数，传递给到驱动使用 平台描述 Qualcomm SDX12+QCA6174平台 驱动信息 [ 112.281429] wlan: loading driver v4.0.11.213X [ 112.340262] msm_pcie_enable: PCIe: Assert the reset of endpoint of RC0. …...

编程日记 2023/8/9 0:22:47

Ajax-AJAX请求的不同发送方式

&#x1f954;&#xff1a;你一定能成为想要成为的人 发送AJAX请求不同方式 发送AJAX请求不同方式1、jQuery发送AJAX请求2、axios发送AJAX请求&#xff08;重点&#xff09;3、fetch发送AJAX请求 发送AJAX请求不同方式 1、jQuery发送AJAX请求 首先需要jquery的js文件&#xf…...

编程日记 2023/8/9 0:21:46

简易图书管理系统（面向对象思想）

目录 前言 1.整体思路 2.Book包 2.1Book类 2.2BookList类 3.user包 3.1User类 3.2NormalUser类 3.3AdminUser类 4.operation 4.1IOPeration接口 4.2ExitOperation类 4.3FindOperation类 4.4ShowOperation类 4.5AddOperation类 4.6DelOperation类 4.7BorrowOpera…...

编程日记 2023/8/9 0:20:45

C++ 函数模板与类模板

C最重要的特性之一就是代码重用&#xff0c;为了实现代码重用&#xff0c;代码必须具有通用性。通用代码应不受数据类型的影响&#xff0c;并且可以自动适应数据类型的变化。这种程序设计类型称为参数化程序设计。模板是C支持参数化程序设计的工具&#xff0c;通过它可以实现参…...

编程日记 2023/8/9 0:19:43

Tailwind CSS：简洁高效的工具，提升前端开发体验

112. Tailwind CSS&#xff1a;简洁高效的工具&#xff0c;提升前端开发体验 1. 什么是Tailwind CSS&#xff1f; Tailwind CSS是由Adam Wathan、Jonathan Reinink、David Hemphill和Steve Schoger等人共同创建的一种现代CSS框架。与传统的CSS框架不同&#xff0c;Tailwind CS…...

编程日记 2023/8/9 0:18:42

NR CSI(六) CSI reporting using PUCCH

之前NR CSI(二) the workflow of CSI report有对CSI report的相关流程进行介绍&#xff0c;而这篇主要看下CSI reporting over PUCCH的相关规定。 CSI report在PUCCH上传输的场景如上表红色字体&#xff0c;有三种场景&#xff0c;具体的对应的是Periodic 和Semi-Persistent CS…...

编程日记 2023/8/9 0:17:40

论文阅读---《Unsupervised Transformer-Based Anomaly Detection in ECG Signals》

题目&#xff1a;基于Transformer的无监督心电图&#xff08;ECG&#xff09;信号异常检测 摘要 异常检测是数据处理中的一个基本问题&#xff0c;它涉及到医疗感知数据中的不同问题。技术的进步使得收集大规模和高度变异的时间序列数据变得更加容易&#xff0c;然而&#xff…...

编程日记 2023/8/9 0:16:39

5G上行干扰规避的参数策略

LNR干扰避让 1. 干扰避让特性 D1/D2干扰避让&#xff1a;干扰与非干扰带宽独立测量&#xff0c;避免部分频带受干扰拉低整个带宽MCS&#xff0c;基于测量结果&#xff0c; 用户级自适应调度60/80/100M&#xff0c;躲避干扰频带。 窄带干扰避让&#xff1a;避免部分带宽的干扰对…...

编程日记 2023/8/9 0:15:34

CTF流量题解tcp1

用流量工具进行分析。发现消息长度有点异常。右键TCP跟踪。 ....mos.-mos-.-.mos-.-mos..-.mos..-mos-. 摩斯密码生成-网页工具 (adminun.com)...

编程日记 2023/8/9 0:14:34

Django快速入门

文章目录 一、安装1.创建虚拟环境&#xff08;virtualenv和virtualenvwrapper&#xff09;2. 安装django 二、改解释器三、创建一个Django项目四、项目目录项目同名文件夹/settings.py 五、测试服务器启动六、数据迁移七、创建应用八、基本视图1. 返回响应 response2. 渲染模板…...

编程日记 2023/8/9 0:13:32

Python “牵手” 淘宝商品详情数据获取方法，淘宝API申请指南

淘宝详情接口 API 是淘宝开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取淘宝商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在淘宝电商平台的开发中&#xff0c;淘宝详情接口 API 是非常常用的 API&#xff0c;因此本文将详细介绍淘宝详情接口 …...

编程日记 2023/8/9 0:12:31

OpenScene

paper：OpenScene: 3D Scene Understanding with Open Vocabularies code: https://github.com/pengsongyou/openscene 摘要：传统的3D场景理解方法依赖于带标签的3D数据集，在有监督的情况下为单个任务训练模型。我们提出了OpenScene，一种替代性的方法，模型预测CLIP特征空…...

编程日记 2023/8/9 0:11:30

大模型数据治理终极指南：5个关键步骤实现高效生命周期管理

大模型数据治理终极指南&#xff1a;5个关键步骤实现高效生命周期管理 【免费下载链接】Foundations-of-LLMs 项目地址: https://gitcode.com/GitHub_Trending/fo/Foundations-of-LLMs 大模型数据治理是构建高质量AI系统的基石&#xff0c;对于确保模型性能、合规性和可…...

编程新知 2026/3/28 5:58:24

2026 工程指南：为什么 AWS Bedrock + Claude 4.6 正在成为多 Agent 协作的底层首选？

进入 2026 年第一季度&#xff0c;大模型领域的竞争已经从“单纯的参数规模”转向了“端到端的工程效率”。随着 GPT-5.4 陷入推理成本高企的泥潭&#xff0c;Anthropic 联手亚马逊发布的 Claude 4.6 托管方案&#xff0c;正在通过 Amazon Bedrock 平台迅速收割企业级市场。作为…...

编程新知 2026/3/28 1:50:04

EtherCAT模块化实战：如何为你的设备设计可热插拔的IO模块（基于SSC与0x4711示例）

EtherCAT模块化实战&#xff1a;如何为你的设备设计可热插拔的IO模块 在工业自动化领域&#xff0c;设备的灵活性和可扩展性正变得越来越重要。想象一下&#xff0c;当你的客户需要在生产线上快速更换不同类型的传感器或执行器时&#xff0c;如果每次硬件变更都需要重新配置整个…...

编程新知 2026/3/28 1:29:45

智能变电站实战：如何用SCL配置文件搞定IED设备联调（附避坑案例）

智能变电站实战&#xff1a;SCL配置文件在IED设备联调中的关键作用与避坑指南 在智能变电站的工程实施中&#xff0c;设备联调环节往往成为项目进度的"拦路虎"。据统计&#xff0c;超过60%的现场调试时间消耗在IED设备间的通信配置问题上。SCL&#xff08;Substation…...

编程新知 2026/3/27 21:35:57

TC3XX Autosar系统中文配置手册：包含19个模块的详细解析与联系指南

tc3xx autosar EB中文配置手册&#xff0c;需要联系。 一共有大约19个模块。 在汽车电子开发领域&#xff0c;TC3xx系列芯片AUTOSAR架构的组合越来越常见。最近研究EB&#xff08;Elektrobit&#xff09;配置工具时&#xff0c;发现其19个核心模块的配置逻辑其实藏着不少"…...

编程新知 2026/3/27 20:41:38

突破PDF转换困境：Marker全攻略——从格式混乱到精准转换的革新之路

突破PDF转换困境&#xff1a;Marker全攻略——从格式混乱到精准转换的革新之路 【免费下载链接】marker 一个高效、准确的工具&#xff0c;能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式&#xff0c;支持多语言和复杂布局处理&#xff0c;可选集成 LLM 提升精度&am…...

编程新知 2026/3/27 19:49:03

从零到一：STM32手动移植FreeRTOS的工程化实践与源码解析

1. 为什么需要手动移植FreeRTOS&#xff1f; 第一次接触FreeRTOS时&#xff0c;很多人会选择用STM32CubeMX自动生成工程。这确实方便&#xff0c;就像用预制菜做饭&#xff0c;但真正想掌握RTOS内核&#xff0c;手动移植才是"从买菜到炒菜"的完整过程。我遇到过不少项…...

编程新知 2026/3/27 19:08:49

避坑指南：C# ComboBox那些容易踩的坑（SelectedIndexChanged的诡异事件）

C# ComboBox开发避坑实战&#xff1a;SelectedIndexChanged的7个隐秘陷阱与解决方案 下拉框控件ComboBox看似简单&#xff0c;却暗藏诸多让开发者抓狂的"坑"。我曾在一个仓储管理系统中&#xff0c;因为ComboBox的异常行为连续加班三晚——数据绑定时的SelectedInde…...

编程新知 2026/3/27 16:13:20

把Camunda流程引擎当SaaS用？多租户与外部任务实战指南（基于RuoYi改造）

基于Camunda构建企业级流程中心的架构设计与实战 在数字化转型浪潮中&#xff0c;业务流程自动化已成为企业提升运营效率的核心手段。当一家企业同时运行CRM、OA、ERP等多个业务系统时&#xff0c;每个系统都需要工作流支持&#xff0c;但为每个系统单独部署和维护Camunda引擎显…...

编程新知 2026/3/27 15:24:56

单片机通用按键处理模块设计与实现

单片机通用按键处理模块设计与实现1. 项目概述1.1 模块功能特性本按键处理模块为单片机系统提供了一套完整的按键事件处理解决方案&#xff0c;具有以下核心功能&#xff1a;基础按键检测&#xff1a;支持按下(PRESS)和释放(RELEASE)事件检测高级触发模式&#xff1a;长按触发(…...

编程新知 2026/3/27 15:14:51