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%{

​ 本关键帧的样式代码

}

相关推荐
清风ai明月1 分钟前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿2 分钟前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
咪库咪库咪4 分钟前
css进阶:flex
前端
xcsweb4 分钟前
用AI理解前端文件类型
前端
剑亦未配妥5 分钟前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
Enddme5 分钟前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript
逆袭的小黄鸭7 分钟前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
小old弟7 分钟前
闭包:从入门到“顿悟”的奇幻之旅
前端
晴殇i8 分钟前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
码是生活9 分钟前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos