web前端基础——实现动画效果_web前端实现图片动画效果-程序员宅基地

技术标签：前端动画 web前端基础 css3

当两个效果之间变换时，可以使用transition过渡属性，但是有多个效果来回变换时，就需要使用动画效果,且动画过程可控（重复播放，画面暂停，最终画面等）

文章目录

1、简介
2、实现步骤
3、复合属性animation
4、动画属性

1、简介

动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或者动画帧

2、实现步骤

定义动画

@keyframes 动画名称{
	from{}
	to{}
}

@keyframes 动画名称{
	0%{}
	10%{}
	20%{}
	50%{}
	100%{}
}

第一种代码只能完成两个状态之间的变化，第二种可以完成多种状态的变化，百分比指的是动画时长的占比

使用动画
animation: 动画名称动画花费时长;

3、复合属性animation

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个表示动画时长，第二个时间表示延迟时间

animation拆分写法
在这里插入图片描述

linear 匀速运动

4、动画属性

使用animation-timing-function:step(数字)实现逐帧动画

本文链接：https://blog.csdn.net/NGUP_LEE/article/details/123362700

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java集成ElasticSearch_java集成es-程序员宅基地

文章浏览阅读925次。Java集成ElasticSearch，包含：ES客户端依赖的引入，创建客户端，ES索引管理，ES管道管理，ES新增、修改、删除、查询数据。_java集成es

Win10无线投屏功能安装失败解决办法_笔记本电脑无线投屏下载失败怎么办-程序员宅基地

文章浏览阅读4.7k次。搜索无线投屏安装即可大多数可能是关闭了win10的更新功能必须要开启win10的更新功能才能够下载对应的组件然后输入找到开启再次下载即可如果还不行的话可以换网络（手机热点）、重启等。_笔记本电脑无线投屏下载失败怎么办

zkw线段树_zkw线段树时间复杂度-程序员宅基地

文章浏览阅读793次。zkw线段树（ZkwSegment Tree）是线段树的升级版，其功能与传统的线段树相同，可以维护一个长度为 n 的数组，用O(log n) 的时间复杂度更新元素，用O(log n) 的时间复杂得到区间和。相比于传统线段树的递归实现，zkw线段树只要使用循环即可实现，并且代码行数更少，执行效率更好。线段树有两个操作：1voidupdate(int i, int delta)：更新数组中下标为 i 的元素的值，将其值加 delta2intget(int min, int max)..._zkw线段树时间复杂度

Word-已经设置多级列表的情况下下，引用题注还是从“0-1”开始-程序员宅基地

文章浏览阅读4.3k次。原因：多半是个人粗心导致，错误的设置如下图，编号属于变量应该在文字中间，但很多人一开始会将本来存在的编号删除然后重新编辑：第1章，所以题注不会识别到标题1。问题：已经设置多级列表的情况下下，引用题注还是从“0-1”开始。解决：正确的的设置如图1，不要去改变自动生成的编号“1”

在虚拟机中安装Linux操作系统详细步骤_虚拟机安装linux系统-程序员宅基地

文章浏览阅读3.5k次，点赞7次，收藏30次。《Linux从小白到大神》| 系统学习Linux开发、VIM/GCC/GDB/Make工具、Linux文件IO、进程管理、进程通信、多线程等，请关注专栏免费学习。本文主要介绍在VMWare虚拟机中安装Linux操作系统的原理和详细步骤。_虚拟机安装linux系统

使用puppeteer获取网页信息_puppeteer爬取网页数据-程序员宅基地

文章浏览阅读2.8k次。Puppeteer 是一个运行在Node端的浏览器，为我们提供了强大的功能，例如抓取页面数据，对页面进行截图等功能..._puppeteer爬取网页数据

随便推点

Map的表结构、遍历哈希 Map 、有无线程安全的线程_java hashmap的循环获取数据安全-程序员宅基地

文章浏览阅读834次，点赞21次，收藏19次。是 Java 中提供的线程安全的哈希 Map 实现，它通过使用分段锁（Segment）来支持并发访问，从而提高了性能。每个段上都有一个锁，多个线程可以同时访问不同的段，从而减小了锁的竞争范围，提高了并发性能。根据实现和特性的不同，Map 可以分为多种不同的类型。遍历哈希 Map 通常意味着访问其中的每一个键值对，并执行一些操作。时，多个线程可以安全地进行读取操作，而写入操作只锁定相关的段，而不是整个数据结构。有线程安全的 Map 集合，其中最常见的是。创建的同步 Map）具有更好的性能。_java hashmap的循环获取数据安全