卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › 一顿饭,学会CSS动画(上)!

一顿饭,学会CSS动画(上)!

坚果大叔
2021-09-08 19:33:30技术阅读 1,311

什么是CSS动画?

能够使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。

animation

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1、animation-name

用来为 @keyframes 动画指定名称。

animation-name: donghua
2、animation-duration

用来定义动画播放完成花费的时间需要多少秒或者毫秒。

animation-duration: time
3、animation-timing-function

用来指定动画的完成过程是以何种速度曲线来实现的。通俗的讲就是匀速、加速或者匀速在加速。

与其他属性不同,我们除了可以使用CSS预置的属性值之外,还可以通过 三次贝尔曲线 来自定义值。

animation-timing-function: value


@value

liener                      // 匀速进行

ease                        // 慢速开始,加速,减速结束

ease-in                     // 慢速开始

ease-out                    // 慢速结束

ease-in-out                 // 慢速开始和结束

cubic-bezier(n,n,n,n)       // 自定义值 n的取值范围 0 - 

除了上面属性之外还有个非常实用的函数steps(number,[end | start])

用于实现逐帧动画,其中第一个参数number用于设置分几步完成,必须为整数。第二个参数 可选start/end默认end。TA决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充。选start就是表示第一帧立即执行,从第二帧开始然后第一帧结束。end则表示正常开始结束。

steps(N, start)将动画分为N段,动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧

steps(N, end)将动画分为N段,动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆),停留在了 N+1 帧。

一顿饭,学会CSS动画(上)!-卖坚果的怪叔叔

4、animation-delay

用来定义动画什么时候开始,可以为负数,负数的时候表示跳过而进入动画,单位是秒或者毫秒。

animation-delay: time
5、animation-iteration-count

用来定义动画播放的次数,可以设置整数或者infinite(无限次)

animation-iteration-count: value
6、animation-direction

定义动画的播放循序。

animation-direction: value


@value

normal                  // 正常

reverse                 // 反向播放

alternate               // 奇数正向播放,偶数反向播放

alternate-reverse       // 奇数反向播放,偶数正向播放
7、animation-fill-mode

用来设置动画结束后所要应用的动作or属性值

animation-fill-mode: value


@value

none            // 无
forwards        // 动画结束后保持最后一个属性值
backwards       // 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值
both            // 向前和向后填充模式都被应用
8、animation-play-state

指定动画是运行还是暂停

animation-play-state: paused|running;
@keyframes

用来创建一个动画的具体实现过程

@keyframes donghua
{
    from {
      width: 100px;
    }
    to {
      width: 200px;
    }
}

Transition

谈及CSS动画属性,我们不得不说下transition这个属性,因为TA基本是和animation配对出现。

Transition CSS的过渡属性。

语法

transition: property duration timing-function delay;
1、transition-property

设置应用过渡效果的CSS属性名称。默认值是all,可以单独指定。

transition-property: none | all | 具体CSS属性值名;
2、transition-duration

用来设置完成过渡效果需要花费的时间(秒/毫秒)

transition-duration: value
3、transition-timing-function

用来设置动画过渡效果的速度曲线。

transition-timing-function: value

@value

linear                      // 匀速-结束

ease                        // 慢速-加速-减速-结束

ease-in                     // 慢速开始-结束

ease-out                    // 开始-慢速结束

ease-in-out                 // 慢速开始-慢速结束

cubic-bezier(n,n,n,n);      // 自定义值,n 0-1之间
4、transition-delay

设置过渡效果何时开始。单位是(秒/毫秒)

transition-delay: time

Transform

用来设置元素的 2D => 3D 转换。实现元素的旋转、缩放、移动或者改变形状。

1、transform: matrix(n,n,n,n,n,n)

用来定义2D转换

2、transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

用来定义3D转换

3、transform: translate

用来实现元素在x,y轴上平移效果。

4、transform: translate3d

用来实现元素在x,y,z轴上平移效果。

5、transform: scale

用来实现2D下的缩放。

6、transform: scale3d

用来实现3D下的缩放。

7、transform: rotate

用来实现2D下的旋转。

8、transform: rotate3d

用来实现3D下的旋转。

9、transform: skew

用来实现2d方向的倾斜

10、transform: perspective

将该元素的子元素设置透视效果,搭配perspective-origin使用。

本篇主要将动画涉及到的三个基本属性以及属性值回顾了一遍,下篇文章将重点对每个属性值的效果进行实际应用。

CSS 动画
赞赏 赞(3)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
WordPress博客评论微信通知功能!(更新版)
上一篇
安静的傍晚
下一篇

评论已关闭

今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
140 0 0
小程序wx.showToast真机不显示?
2022-11-03 17:42:55
506 0 0
3
  • 3
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
225
文章
59
评论
159
喜欢