CSS3——动画

 

动画

  1. 什么是帧

一段动画,就是一段时间内连续播放n个画面。每一张画面,我们管它叫做“帧”。一定时间内连续快速播放若干个顿,就成了人眼中所看到的动画。同样时间内,播放的帧数越多,画面看起来越流畅。

2.什么是关键帧

关键帧指的是,在构成一段动画的若干帧中,起到决定性作用的 2-3 帧

from和百分比可以混着用,但是一般不建议

 动画的简单定义方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js练习</title><script type="text/javascript"></script><style>/*定义一个动画(定义一组关键帧)*//*开始帧,一般情况下不用设置第一帧*//*动画的名字只能是唯一的*/@keyframes wangyoudong{from{}/*最后一帧*/to{transform:translate(900px);background-color: red;}}.inner{width:100px;height:100px;background-color:deepskyblue;/*应用动画到元素*/animation-name:wangyoudong;/*动画持续时间,必须要写*/animation-duration: 3s;/*动画延迟时间*/animation-delay: 0.5s;/*显示完整的动画过程的两种形式:一、把浏览器调整为独立显卡工作模式在浏览器的系统设置中开启“使用硬件加速模式”二、设置延迟也可以显示完整的动画过程*/}</style></head><body><div class="inner"></div></body></html>

 动画的完整定义方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js练习</title><script type="text/javascript"></script><style>/*定义一个动画(定义一组关键帧)*//*开始帧,一般情况下不用设置第一帧*//*动画的名字只能是唯一的*/@keyframes wangyoudong2{0%{}20%{background-color:greenyellow;}40%{background-color:yellow;}60%{background-color: green;}80%{background-color: pink;}100%{transform:translate(900px);background-color:orange;}}.inner{width:100px;height:100px;background-color:deepskyblue;/*应用动画到元素*/animation-name:wangyoudong2;/*动画持续时间,必须要写*/animation-duration: 3s;/*动画延迟时间*/animation-delay: 0.5s;/*显示完整的动画过程的两种形式:一、把浏览器调整为独立显卡工作模式在浏览器的系统设置中开启“使用硬件加速模式”二、设置延迟也可以显示完整的动画过程*/}</style></head><body><div class="inner"></div></body></html>

给元素应用动画,用到的属性如下:

1.animation-name: 给元素指定具体的动画 (具体的关键顿)

2. animation-duration : 设置动画所需时间

3 animation-delay : 设置动画延迟

.box (

/* 指定动画 */

animation-name: testKey;

/* 设置动画所需时间 ,这个是必须要写的*/

animation-duration: 5s;

/* 设置动画延退 */

animation-delay: 0.5s;

/*其他属性----start*/

/*设置动画的方式*/

animation-timing-function:linear;

/*动画播放的次数,infinite是无限循环播放*/

animation-iteration-count:infinite;   

/*动画的方向*/

animation-direction:alternate;

/*动画以外的状态(不发生动画的时候在哪里)*/

/*animation-fill-mode:forwards;*/

.outer:hover .inner{

/*动画的播放状态*/

animation-play-state:paused;

}

可以设置很多的效果和变换

to{

transform: translate(900px) rotate(360deg);

background-color:purple;

border-radius: 50%;

}

ease:平滑过渡--默认值

linear : 线性过渡

ease-in:慢一快

ease-out : 快一慢

ease-in-out : 慢一快一慢

step-start : 等同于 steps(1,start)

step-end :等同于 steps(1, end)

steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是 start 或 end,指定每一步的值发生变化的时间点。第二个参数默认值为 end,

cubic-bezie(number,number,number,number): 特定的贝赛尔曲线类型

animation-iteration-count ,指定动画的播放次数,常用值如下

1 number:动画循环次数

  1. infinite :无限循环

animation-direction ,指定动画方向,常用值如下:

1. normal:正常方向(默认)

2 reverse: 反方向运行

  1. alternate : 动画先正常运行再反方向运行,并持续交替运行
  2. alternate-reverse: 动画先反运行再正方向运行,并持续交替运行

animation-fill-mode,设置动画之外的状态

1 forwards : 设置对象状态为动画结束时的状态

2backwards : 设置对象状态为动画开始时的状态

animation-play-state ,设置动画的播放状态,常用值如下

1 running: 运动(默认)

2 paused:暂停

动画复合属性

只设置一个时间表示 duration,设置两个时间分别是:duration 和 delay ,其他属性没有数量和顺序要求

.inner (

animation :atguigu 3s 0.5s linear 2 alternate-reverse forwards;

备注: animation-play-state 一般单独使用

过渡和动画的区别

/*用过渡实现inner1跑到右边去*/

.inner1{

background-color:orange;

/*谁发生过渡,给谁加*/

transition:3s linear;

}

/*动画不需要触发条件,过渡需要*/

.outer:hover .inner1{

transform:translate(900px);

}

/*动画可以设置精细的过渡效果,过渡不可以*/

/*用动画实现inner2跑到右边去*/

@keyframes donghua{

0%{}

100%{

transform:translate(900px);

}

}

.inner2{

background-color:green;

animation:donghua 3s linear;

}

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

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

相关文章

uniapp 安卓模拟器链接

下载genymotion 安装 配置adb路径 模拟端口设为 5307

数据库系统课程设计(高校成绩管理数据库系统的设计与实现)

目录 1、需求分析 1 1.1 数据需求描述 1 1.2 系统功能需求 3 1.3 其他性能需求 4 2、概念结构设计 4 2.1 局部E-R图 4 2.2 全局E-R图 5 2.3 优化E-R图 6 3、逻辑结构设计 6 3.1 关系模式设计 6 3.2 数据类型定义 6 3.3 关系模式的优化 8 4、物理结构设计 9 4.1 聚…

CSDN规则详解——csdn那些你不知道的事儿(点赞、评论、收藏)

文章目录 每日一句正能量前言点赞评论收藏原力等级和博客等级后记 每日一句正能量 “只有奋斗者才能成为胜利者&#xff0c;只有坚持者才能创造奇迹。” - 迈克尔乔丹 这句话来自于世界著名篮球运动员迈克尔乔丹&#xff0c;他以无与伦比的天赋和努力成为了篮球界的传奇人物。他…

基于ChatGpt,Java,SpringBoot,Vue,Milvus向量数据库的定制化聊天Web demo

customized chat GitHub - bigcyy/customized-chatgpt: 基于ChatGpt&#xff0c;Java&#xff0c;SpringBoot&#xff0c;Vue&#xff0c;Milvus向量数据库的定制化聊天Web demo 简介 基于ChatGpt&#xff0c;Java&#xff0c;SpringBoot&#xff0c;Vue&#xff0c;Milvus向…

模式识别与机器学习-SVM(线性支持向量机)

线性支持向量机 线性支持向量机间隔距离学习的对偶算法算法:线性可分支持向量机学习算法线性可分支持向量机例子 谨以此博客作为复习期间的记录 线性支持向量机 在以上四条线中&#xff0c;都可以作为分割平面&#xff0c;误差率也都为0。但是那个分割平面效果更好呢&#xff1…

Java文件操作实现doc格式转pdf

使用场景 在进行生成文档或者报告的时候&#xff0c;生成的word想要转换为pdf格式&#xff0c;这样才能保证报告的不可修改性&#xff0c;但是aspose-words的工具的License令人头疼&#xff0c;这篇文章就是解决这个doc转pdf的License的问题。话不多说&#xff0c;直接上实操。…

lodash源码分析每日一练 - 数组 - intersection / intersectionBy / intersectionWith

今日分享&#xff1a; 每一步都是曼妙的风景~ lodash官网地址 _.intersection([arrays]) 使用&#xff1a; 创建唯一值的数组&#xff0c;这个数组包含所有给定数组都包含的元素&#xff0c;使用SameValueZero进行相等性比较。&#xff08;注&#xff1a;可以理解为给定数组…

箭头函数的泛型,typescript中怎么写

TypeScript——泛型&#xff08;函数泛型、模板类型可以是多个、泛型的错误、泛型函数变量、泛型函数类型接口、泛型类1、泛型类2、泛型约束、泛型参数的默认类型&#xff09;、声明文件、Vue3.0集成ts_typescript 泛型函数-CSDN博客

JavaScript----条件语句

1. 条件语句的介绍 条件语句就是通过条件来控制程序的走向 2. 条件语句语法 if 语句 - 只有当指定条件为 true 时&#xff0c;使用该语句来执行代码if...else 语句 - 当条件为 true 时执行代码&#xff0c;当条件为 false 时执行其他代码if...else if....else 语句 - 使用该…

【C语言】自定义类型:结构体深入解析(三)结构体实现位段最终篇

文章目录 &#x1f4dd;前言&#x1f320;什么是位段&#xff1f;&#x1f309; 位段的内存分配&#x1f309;VS怎么开辟位段空间呢&#xff1f;&#x1f309;位段的跨平台问题&#x1f320; 位段的应⽤&#x1f320;位段使⽤的注意事项&#x1f6a9;总结 &#x1f4dd;前言 本…

第40节: Vue3 注册生命周期钩子

在UniApp中使用Vue3框架时&#xff0c;你可以注册生命周期钩子来执行特定的逻辑。以下是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架注册生命周期钩子&#xff1a; <template> <view> <p>{{ message }}</p> </view> </templ…

大数据HCIE成神之路之数据预处理(6)——特征编码

特征编码 1.1 独热编码1.1.1 实验任务1.1.1.1 实验背景1.1.1.2 实验目标1.1.1.3 实验数据解析1.1.2 实验思路1.1.3 实验操作步骤1.1.4 结果验证1.2 Label-Encoding1.2.1 实验任务1.2.1.1 实验背景1.2.1.2 实验目标1.2.1.3 实验数据解析1.2.2 实验思路1.2.3 实验操作步骤1.2.4 结…

C中的extern关键字

C中的extern关键字应用于C变量&#xff08;数据对象&#xff09;和C函数。基本上&#xff0c;extern关键字扩展了C变量和C函数的可见性。这可能就是它诶命名为extern的原因。 虽然大多数人可能理解变量或函数的“声明&#xff08;declaration&#xff09;” 和 “定义&#xf…

月薪高达6W,多家大厂急招鸿蒙开发工程师,现在转还来得及吗?

近期&#xff0c;“安卓版本与鸿蒙不再兼容”的词条登上微博热搜&#xff0c;华为鸿蒙加速按下向“纯血鸿蒙”蜕变的启动键&#xff0c;欲与 iOS、安卓在市场三分天下。 一批嗅觉灵敏的互联网大厂&#xff0c;已经完成或开始启动开发鸿蒙原生 APP&#xff0c;也于近期发布了和…

十、Shell 变量类型

Shell 支持不同类型的变量&#xff0c;其中一些主要的类型如下&#xff1a; 一、整数变量 整型变量用于存储整数据数据。可以使用整数赋值给变量&#xff0c;或者通过命令的输出结果获取整数值。整型变量可以用于数学计算、循环控制等等。 #!/bin/bash num110 num25 su…

Java之ThreadLocal 详解

ThreadLocal 详解 原文地址&#xff1a;https://juejin.cn/post/6844904151567040519open in new window。 什么是ThreadLocal&#xff1f; ThreadLocal提供线程局部变量。这些变量与正常的变量不同&#xff0c;因为每一个线程在访问ThreadLocal实例的时候&#xff08;通过其…

视频流媒体直播云服务管理平台EasyNVS长时间运行出现崩溃情况是什么原因?该如何解决?

EasyNVS云管理平台具备汇聚与管理EasyGBS、EasyNVR等平台的能力&#xff0c;可以将接入的视频资源实现统一的视频能力输出&#xff0c;支持远程可视化运维等管理功能&#xff0c;还能解决设备现场没有固定公网IP却需要在公网直播的需求。 有用户反馈&#xff0c;在长时间不间断…

CGAL的D维范围树和线段树

范围树和线段树是两种数据结构&#xff0c;用于高效地处理和查询数据。 范围树&#xff08;Range Tree&#xff09;是一种二叉树&#xff0c;它通过递归地将每个节点分割成两个子节点来存储一个点集。每个节点表示一个范围&#xff0c;并且存储该范围内所有点的最小和最大值。范…

Mybatis 动态 SQL - script,bind,多数据库支持

script 在使用注解的映射器类中使用动态SQL时&#xff0c;可以使用<script>元素。例如&#xff1a; Update({"<script>","update Author"," <set>"," <if testusername ! null>username#{username},</if&g…

静物摄影在UE5里运用几点记要

被摄体&#xff0c;相机与光源的关系&#xff0c;要增强立体感&#xff0c;摄像机与光源的位置关系要错开&#xff1b;b的立体感要更强 漫反射与点光源&#xff0c;UE5太阳光属于漫反射&#xff0c;整体比较柔和&#xff0c;但是阴影处比较黑&#xff1b;摄影棚会用反光板来增亮…