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

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

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

文章目录[隐藏]

  • 什么是CSS动画?
    • animation
      • 语法
        • 1、animation-name
        • 2、animation-duration
        • 3、animation-timing-function
        • 4、animation-delay
        • 5、animation-iteration-count
        • 6、animation-direction
        • 7、animation-fill-mode
        • 8、animation-play-state
        • @keyframes
    • Transition
      • 语法
        • 1、transition-property
        • 2、transition-duration
        • 3、transition-timing-function
        • 4、transition-delay
    • Transform
      • 1、transform: matrix(n,n,n,n,n,n)
      • 2、transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
      • 3、transform: translate
      • 4、transform: translate3d
      • 5、transform: scale
      • 6、transform: scale3d
      • 7、transform: rotate
      • 8、transform: rotate3d
      • 9、transform: skew
      • 10、transform: perspective

什么是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博客评论微信通知功能!(更新版)
上一篇
安静的傍晚
下一篇

评论已关闭

近期文章
  • ant-design-vue a-select 下拉滚动的时候出现数据重复
  • ant-design-vue a-checkbox-group 追加数据后第一个无法选中
  • 5.1游记
  • 将数组中空值字段赋默认值!
  • 周末出游,惊喜相伴——水牛的美丽邂逅。
ant-design-vue a-select 下拉滚动的时候出现数据重复
2023-05-15 14:49:38
91 1 0
ant-design-vue a-checkbox-group 追加数据后第一个无法选中
2023-05-13 15:13:43
147 0 0
将数组中空值字段赋默认值!
2023-04-25 14:49:11
182 0 0
数字跟文字一起被强制换行了?
2023-04-07 17:25:04
252 0 0
3
  • 3
博主

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

友链
Lieme
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔
Copyright © 2017-2023 卖坚果的怪叔叔

萌ICP备20230818号 苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于
# WordPress # # CSS #
坚果大叔
243
文章
65
评论
186
喜欢