css3动画

css3动画

css3中的动画分为Animation功能和Transition功能,这两种功能都可以通过修改CSS的属性来产生动画效果。

1、Animation能支持通过关键帧的指定在页面上产生更复杂的动画效果。

2、Transition功能支持从一个属性值平滑过渡到另一个属性值。

一、Transition功能

语法:transition: property duration timing-function delay

1.property:表示对哪个属性操作

描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

2.duration:表示大多少时间内完成属性值的平滑过渡

描述
time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。

3.timing-function:表示通过什么方法平滑过渡

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n ,n ,n ,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.delay:表示延迟多少时间开始执行特效

描述
time 指定秒或毫秒数之前要等待切换效果开始

分别对应四个属性:

​ transition-property

​ transition-duration

​ transition-timing-function

​ transition-delay

二、Animation功能

Transition只能指定要改变的属性的开始值和结束值,然后在这两个值之间进行平滑过渡的方式来实现动画效果,因此不能实现比较复杂的动画效果。而animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

在使用animation时,通过如下方法来创建关键帧的集合:

@key关键帧集合名{创建关键帧的代码}

创建关键帧代码如下:

40%{

​ 本关键帧的样式代码

}

相关推荐
小墨宝21 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED36 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿40 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子41 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet