【H2O2|全栈】关于CSS(10)CSS3扩充了哪些新鲜的东西?(三)

目录

CSS3入门

前言

准备工作

过渡属性

transition-property

transition-duration

transition-timing-function

transition-delay

帧动画

@keyframes

animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

预告和回顾

后话


CSS3入门

前言

本系列博客主要介绍CSS有关知识点,当前章节讲述CSS3相关内容。

本期主要内容为:

  • CSS3过渡属性
  • CSS3帧动画

部分内容仅代表个人观点,仅供参考,希望能帮助到您。

准备工作

软件: 【++参考版本++ 】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

*我的电脑是Win10的版本,仅供参考*

过渡属性

在CSS3以前,元素之间的样式过渡(从一个样式过渡到另一个样式)只能使用js实现。而现在,利用新增的transition属性就可以完成一些过渡的效果。

该属性按顺序依次简写下面几个属性值(部分):

css 复制代码
transition-property transition-duration transition-timing-function transition-delay

transition-property

用于设置需要设置过渡的属性,填写all则对应所有属性。

transition-duration

用于设置过渡需要的时间,默认0s。

transition-timing-function

用于设置过渡效果的时间曲线,常见的曲线如下:

时间曲线名 效果
linear 规定以相同速度开始至结束的过渡效果。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。

transition-delay

用于设置延迟开始的时间,默认为0s。

帧动画

CSS3通过创建帧动画,取代网页中的动图,flash动画以及js实现的部分效果。

@keyframes

帧动画的CSS代码如下:

css 复制代码
@keyframes name{
    0% {}

    n% {}

    100% {}

}

其中name为帧动画的名称,n为0~100之间的值。

通过设置帧动画时间和n%,可以设置元素在某一时刻(帧)的效果。

animation

该属性用于调用动画。该属性依次调用以下属性:

css 复制代码
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
animation-name

用于设置帧动画的名称,对应之前@keyframe中的动画名称,可以设置为none表示没有动画。

animation-duration

用于设置动画持续的时间,单位为s或者ms,类似transition。

animation-timing-function

规定动画的速度曲线,类似transition。

animation-delay

用于设置动画延迟开始的时间。

animation-iteration-count

用于设置动画播放的次数,默认为1。可以设置infinite以无限播放。

animation-direction

用于设置动画是否在下一周期逆向地播放。默认值为normal,可以设置reserve以在结束之后反向播放。

animation-fill-mode

用于设置当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

该属性的值如下:

  • none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  • forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
  • backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。
  • both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
animation-play-state

用于设置动画是否播放。默认值为running,即播放,设置paused以让动画暂停。可以配合js或者hover等伪类使用。

预告和回顾

对网页布局和制作感兴趣的朋友,可以看下面的CSS专栏,里面有很多讲解详尽的案例,当前为第九期:

专栏 | CSS入门http://t.csdnimg.cn/4bvCJ当然,也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

------已经缺氧的【H2O2】

相关推荐
GISer_Jing几秒前
React核心功能详解(一)
前端·react.js·前端框架
捂月4 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆11 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China12 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q13 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海14 分钟前
Chrome离线安装包下载
前端·chrome
m512724 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维2 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存