【前段基础入门之】=>CSS3新特性 @keyframes 动画

2023-11-06 12:28

本文主要是介绍【前段基础入门之】=>CSS3新特性 @keyframes 动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述
导语

CSS3 新特性中,新增了动画效果 的定义方式,这使得我们可以通过使用 CSS,从而开发出精美的动画效果,所以本章节,就来详细聊一聊如何通过 CSS 去创建一个动画效果案例

在这里插入图片描述

  • **学习动画之前,我们得先了解一个概念 **

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

什么是关键帧

  • 关键帧指的是,在构成一段动画的若干帧中,起到决定性作用的2-3
    在这里插入图片描述

动画的基本使用

第一步:定义关键帧(定义动画

简化方式定义:

@keyframes 动画名 {from {/*property1:value1*//*property2:value2*/}to {/*property1:value1*/}
}

精炼定义方式:

@keyframes 动画名 {0% {/*property1:value1*/}20% {/*property1:value1*/}40% {/*property1:value1*/}60% {/*property1:value1*/}80% {/*property1:value1*/}100% {/*property1:value1*/}
}

第二步: 给元素应用动画配置,常用基本属性如下:

  1. animation-name :给元素指定具体的动画(具体的关键帧)
  2. animation-duration :设置动画所需时间
  3. animation-delay :设置动画延迟
div {width: 100px;height: 100px;background-color: aqua;//设置动画名 animation-name: right-move;// 设置动画过渡时间animation-duration: 2s;// 设置动画 延时执行时间animation-delay: 0.5s;
}//定义动画
@keyframes right-move {from {}to {transform: translate(700px);}
}

动画的扩展属性

  • animation-timing-function ,设置动画的类型,常用值如下:
属性值描述
ease平滑过渡 —— 默认值
linear线性过渡
ease-in慢 → 快 呈加速过渡
ease-out快 → 慢 呈减速过渡
ease-in-out慢 → 快 → 慢过渡
step-start不考虑过渡时间,一步到位过渡完
step-end考虑过渡时间,过渡时间结束后,一步到位过渡完
steps( integer,?)接受两个参数的步进函数。第一个参数必须为正整数,指定函数的分阶步数。第二个参数取值可以是 start end ,指定每一步的值发生变化的时间点。第二个参数默认值为 end
cubic-bezie ( number, number, number, number)特定的贝塞尔曲线类型

点击制作贝塞尔曲线
在这里插入图片描述

  • animation-iteration-count:指定动画的播放次数,常用值如下:
属性值描述
number数字动画循环具体次数
infinite无限循环
  • animation-direction:指定动画方向,常用值如下
属性值描述
normal正常方向 (默认)
reverse反方向运行
alternate动画先正常运行再反方向运行,并持续交替运行
alternate-reverse 动画先反运行再正方向运行,并持续交替运行
  • animation-fill-mode ,设置动画之外的状态
属性值描述
forwards设置对象状态为动画结束时的状态
backwards设置对象状态为动画开始时的状态
  • animation-play-state:设置动画的播放状态,常用值如下:
属性值描述
running运动 (默认)
paused暂停

动画复合属性

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

示例:

div {animation: right-move  0.5s 0.5s linear infinite alternate-reverse forwards;
}@keyframes right-move {0% {border-radius: 0%;background-color: #71848e;}20% {border-radius: 10%;background-color: #cc12c9;}40% {border-radius: 20%;background-color: #230cbc;}60% {border-radius: 30%;background-color: #e2de0d;}80% {border-radius: 40%;background-color: #4add2d;}100% {transform: translate(700px);border-radius: 50%;background-color: #1fb8ef;}
}

在这里插入图片描述

在这里插入图片描述


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

这篇关于【前段基础入门之】=>CSS3新特性 @keyframes 动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/356602

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》:本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键