css_22_过渡动画

一.过渡

transition-property

  • 作用:定义哪个属性需要过渡。
  • 结构:

transition-property: all;

  • 常用值:
    1.none:不过渡任何属性。
    2.all:过渡所有能过渡的属性。
    3.具体某个属性名,例如:width、heigth,若有多个以逗号分隔。

transition-duration

  • 作用:设置过渡的持续时间。
  • 结构:

transition-duration: 1s;

  • 常用值:
    1.0没有任何过渡时间﹣﹣默认值。
    2.s或ms:秒或毫秒。 3.列表: ■如果想让所有属性都持续一个时间,那就写一个值。 ■ 如果想让每个属性持续不同的时间那就写一个时间的列表。

举例:

        .box1 {width: 200px;height: 200px;background-color: orange;opacity: 0.5;/* 设置哪个属性需要过渡效果 */transition-property: width,height,background-color;/* 让所有能过渡的属性,都过渡 */transition-property: all;/* 分别设置时间 */transition-duration: 1s,1s,1s;/* 设置一个时间,所有人都用 */transition-duration: 1s;}

transition-delay

  • 作用:指定开始过渡的延迟时间,
  • 单位:s或ms

transition-timing-function

  • 作用:设置过渡的类型
  • 常用值:
    1.ease:平滑过渡﹣- 默认值
    2.linear:线性过渡
    3.ease-in:慢一快
    4.ease-out:快→慢
    5.ease-in-out:慢→快一慢
    6.step-start:等同于steps(1,start)
    7.step-end:等同于 steps(1,end)
    8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
    9.cubic-bezie (number,number, number, number):特定的贝塞尔曲线

transition 复合属性

  • 如果设置了一个时间,表示 duration;如果设置了两个时间,第一是 duration,第二个是delay;其他值没有顺序要求。

transition:1s 1s linear all;

二.动画

  • 结构:
       /* 定义一个动画(定义一组关键帧)—— 第一种方式 */@keyframes 动画名 {/* 第一帧 */from {}/* 最后一帧 */to {transform: translate(900px);background-color: red;}}/* 定义一个动画(定义一组关键帧)—— 第二种方式 */@keyframes 动画名 {/* 第一帧 */0% {}/* 最后一帧 */100% {transform: translate(900px) rotate(360deg);background-color: purple;border-radius: 50%;}
  • 具体属性:
    animation-name:给元素指定具体的动画(具体的关键帧)
    animation-duration:设置动画所需时间
    animation-delay:设置动画延迟
        .inner {/* 应用动画到元素 */animation-name: 动画名;/* 动画持续的时间 */animation-duration: 3s;/* 动画延迟时间 */animation-delay: 0.2s;}
  • animation-timing-function:设置动画的类型。

常用值如下:
1.ease:平滑动画﹣﹣默认值
2.linear:线性过渡
3.ease-in:慢→快
4.ease-out:快→慢
5.ease-in-out:慢→快→慢
6.step-start:等同于 steps(1,start)
7.step-end:等同于 steps(1,end)
8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
9.cubic-bezie (number, number,number, number).

  • animation-iteration-count:指定动画的播放次数,

常用值如下:

  1. number:动画循环次数
  2. infinite:无限循环
  • animation-direction:指定动画方向

常用值如下:

  1. normal: 正常方向(默认)
  2. reverse:反方向运行
  3. alternate:动画先正常运行再反方向运行,并持续交替运行
  4. alternate-reverse:动画先反运行再正方向运行,并持续交替运行
  • animation-fill-mode:设置动画之外的状态
  1. forwards:设置对象状态为动画结束时的状态
    2.backwards:设置对象状态为动画开始时的状态
  • animation-play-state:设置动画的播放状态,

常用值如下:

  1. running:运动(默认)
  2. paused:暂停
  • 复合属性
    只设置一个时间表示duration,设置两个时间分别是:duration和 delay,其他属性没有数量和顺序要求。

.inner { animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards; }

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

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

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

相关文章

驾校预约小程序系统的设计

管理员账户功能包括:系统首页,个人中心,学员管理,教练管理,驾校信息管理,驾校车辆管理,教练预约管理,考试信息管理 微信端账号功能包括:系统首页,驾校信息&a…

Java基础——五、继承

五、继承 简要 1、说明 继承(Inheritance)是面向对象编程(OOP)的一个核心概念,它允许一个类(子类)继承另一个类(父类)的属性和方法,从而实现代码重用和结构化组织。通过继承,子类可以扩展父类的功能或者对父类的方法进行重写。 父类(超类…

基于docker安装redis服务

Redis是我们在项目中经常需要使用的缓存数据库,安装redis的方式也有很多,本文主要是给大家讲解如何基于docker进行redis服务的安装,主要介绍,如何拉取redis镜像、如何挂载redis的数据以及使用redis的配置文件和开启认证等功能&…

steam社区载入失败、加载不出来、打不开?

随着steam夏季大促的到来,最近steam在线用户越来越多了,很多玩家在自己喜欢的游戏社区里看最新的玩法、攻略和玩家的游戏心得。不过有不少玩家表示有时候会打不开游戏社区或是社区加载失败等问题。根据大家遇到的问题,这里总结了几种解决方法…

构建现代医疗:互联网医院系统源码与电子处方小程序开发教学

本篇文章,笔者将探讨互联网医院系统的源码结构和电子处方小程序的开发,帮助读者更好地理解和掌握这些前沿技术。 一、互联网医院系统源码结构 互联网医院系统通常由多个模块组成,每个模块负责不同的功能。以下是一个典型的互联网医院系统的主…

基于C语言的Jacobi迭代和Gauss-Seidel迭代的方程组求解实现

文章目录 Jacobi迭代方法介绍Gauss-Seidel迭代方法介绍具体代码实现示例题目实现效果 Jacobi迭代方法介绍 Jacobi迭代法是一种简单的迭代求解方法,适用于严格对角占优矩阵。其基本思想是利用当前迭代步的已知解来更新下一个迭代步的解。在C语言实现中,我…

商协会小程序如何提升商协会形象?

商协会小程序在提升商协会形象方面扮演着重要角色。以下是关于商协会小程序如何提升商协会形象的一些场景分析: 1、数字化名片与品牌形象展示 小程序可以作为商协会的数字名片,通过展示商会文化、活动信息和会员服务,有效提升商会的品牌形象…

链表反转的两种方式

链表反转的两种方式 1.头插法 先创建一个新的链表,然后不断遍历我们想要反转的链表,再一个一个使用头插法插入到我们新建立的链表中,这样链表就倒置了。 LinkList Reverse(LinkList re) {LinkList n;n (LinkList)malloc(sizeof(LNode));n…

C语言代码风格

程序文件的说明,一般放在文件头部注释。 用来描述文件的作用、作者、日期等信息。一般格式如下: /** 文件名:filename.c* 功能:简要描述文件的功能或作用* 作者:作者姓名* 日期:创建日期或最近修改日期*/…

Textual Learning2 -- 使用时的小问题

1、出现的问题: 在vscode里面直接运行函数会显示报错: 我尝试在vscode中含textual库的环境下运行,但仍然报错 2、解决方案: 在命令行中运行: 首先按winR,输入cmd打开命令行 或在已经安装的conda环境&a…

古人的智慧结晶——水铳:揭秘明清时期的消防神器

明代的《奇器图说》是一本记录了当时各种奇巧机械的著作,而水铳则是书中记载的一项令人惊叹的发明,它不仅展示了古人对物理原理的深刻理解,更是早期消防技术的一个缩影。 水铳,这个名字听起来似乎有些陌生,但在古代&am…

在数据库水平扩展中,名人问题(Celebrity Problem)也被称为热点键问题(Hotspot Key Problem)。

在数据库水平扩展中,名人问题(Celebrity Problem)也被称为热点键问题(Hotspot Key Problem)。这是指某些特定的键(例如名人或非常受欢迎的内容)会导致某个分片(shard)被过…

电脑文件kernel32.dll缺失要怎么处理?怎么才能一键修复kernel32.dll文件

关键系统文件kernel32.dll的缺失,这种情况不仅会导致系统运行不稳定,甚至可能完全无法启动某些应用程序。kernel32.dll 是一个至关重要的动态链接库文件,它与Windows操作系统的多个基本操作相关联,包括内存管理、进程和线程的控制…

dledger原理源码分析系列(二)-心跳

简介 dledger是openmessaging的一个组件, raft算法实现,用于分布式日志,本系列分析dledger如何实现raft概念,以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的心跳 关键词 Raft Openmessaging 心跳/…

C++中的常成员函数

2024年6月29日,周日下午 例如,以下是一个常成员函数的示例: class MyClass { public:int getValue() const {return value;} private:int value; };常成员函数是C中一种特殊的成员函数,它具有以下特点: 不可修改对象…

Flink Window DEMO 学习

该文档演示了fink windows的操作DEMO 环境准备: kafka本地运行:kafka部署自动生成名字代码:随机名自动生成随机IP代码:随机IPFlink 1.18 测试数据 自动向kafka推送数据 import cn.hutool.core.date.DateUtil; import com.alibab…

技术赋能教育:校园3D电子地图与AR导航解决方案

随着高考的落幕,又一批新鲜血液即将注入大学校园。面对陌生的环境,如何快速适应、准确找到目标地点,成为新生们的一大难题。同时,对于学校而言,如何向报考人员直观展示校园环境,提供沉浸式参观体验&#xf…

Mybatis-Plus学习|快速入门CRUD、主键生成策略(雪花算法、主键自增等)、自动填充、乐观锁、分页插件、逻辑删除

MyBatisPlus概述 为什么要学习它呢?MyBatisPlus可以节省我们大量工作时间,所有的CRUD代码它都可以自动化完成! JPA、tk-mapper、MyBatisPlus 偷懒的! MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变&#xff…

Pytorch学习之torch.nn.functional.pad()函数

PyTorch学习之torch.nn.functional.pad函数 一、简介 torch.nn.functional.pad 是 PyTorch 中用于对张量进行填充操作的函数。填充操作在处理图像、序列数据等任务时非常常见,它可以在张量的指定维度两端添加一定数量的元素,填充方式多样,包…

Git的基本使用方法

Git的基本使用方法 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将深入探讨Git的基本使用方法,Git作为目前最流行的版本控制系统之一&…