CSS3 动画

Unsplash

1 渐变

渐变指在两个或多个指定的颜色之间显示平稳的过渡,渐变一般分为线性渐变和径向渐变,呈一条直线渐变的称作线性渐变,而从圆心到四周扩散的过程成为径向渐变

从左到右的线性渐变,起点是完全透明,慢慢过渡到完全不透明的红色

background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))

线性渐变

background: radial-gradient(red, orange, yellow);

径向渐变

2 过渡

从一种效果过渡到另一种效果,需要指定添加效果的 CSS 属性及过渡所需要的时间

transition: property duration timing-function delay;

property 必须,设置过渡效果的 CSS 属性的名称 duration 必须,完成过渡效果需要多少秒或毫秒 timing-function 速度效果的速度曲线,取值为 linear 匀速运动,ease 逐渐变慢,ease-in 先慢后快,ease-out 先快后慢,ease-in-out 先慢后快再慢 delay 定义过渡效果何时开始

过渡

3 2D 变形

2D 变形中主要包含四个变换函数,分别是 translate() 位移函数,scale() 缩放函数,rotate() 旋转函数,skew() 倾斜函数

translate() 位移函数,从一个地方位移到另一个地方,和数学中的坐标系相比,Y 轴正方向在下面,X 轴正方向仍是右边

transform: translate(100px); 向右平移 100px transform: translate(-100px, -100px); 向左平移 100px,向上平移 100px transform: translateX(100px); 向右平移 100px transform: translateY(-100px); 向上平移 100px

scale() 缩放函数,让元素根据中心原点对对象进行缩放,默认的值 1。小于 1 则元素缩小,反之放大

scale(num) 横坐标与纵坐标同时缩放 num 倍 scale(num1, num2) 横坐标缩放 num1 倍,纵坐标缩放 num2 倍 scaleX(num1) 横坐标缩放 num1 倍 scaleY(num2) 纵坐标缩放 num2 倍

rotate() 旋转函数,接受一个角度值,用来指定旋转的幅度,如果这个值为正值,元素相对原点中心顺时针旋转,若为负值,则逆时针旋转,可通过 transform-origin: center center; 设置选择基点,第一个值表示左右,可选值为 left, center, right,第二个值表示上下,可选值为 top, center, bottom

transform: rotate(50deg); 顺时针旋转 50 度 transform: rotate(-50deg); 逆时针旋转 50 d度

skew() 倾斜函数,可以将一个对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜,这与rotate()函数的旋转不不同,rotate() 函数只是在一个水平面上进行旋转,而不会改变元素的形状,skew() 函数不会旋转,而是倾斜,因此会改变元素的形状

skew(x) / skew(x, y) / skewX(x) / skewY(y) x:用来指定元素水平方向(X 轴方向)倾斜的角度 y:用来指定元素垂直方向(Y 轴方向)倾斜的角度

4 3D 变形

3D 变换主要包括以下几种功能函数: 3D 位移函数:主要包括 translateX(), translateY(), translateZ()translate3d() 3D 旋转函数:主要包括 rotateX(), rotateY(), rotateZ()rotate3d() 3D 缩放函数:主要包括 scaleX(), scaleY(), scaleZ()scale3d()

在进行 3D 变化元素的外层元素设置 transformstyle: preserve-3d,能够确保该元素的所有子元素都处在 3D 空间中

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;    

5 关键帧和动画

CSS3 动画的创建有两步:① 定义 CSS3 关键帧 keyframes;② animation 调用 keyframes,并设置动画属性(将动画绑定到需要做动画的标签中)

我们在使用 transition 制作一个简单的 transition 效果时,该效果包括了初始属性和最终属性,开始执行动作时间和延续动作时间,以及动作的变换速率,如果我们要控制的更细一些,如第一个时间段执行什么动作,第二个时间段执行什么动作,即 flash 中的,第一帧要执行什么动作,第二帧要执行 什么动作,这样我们用 transition 就很难实现了,所以我们需要用 @keyframes 属性来实现这样的效果

@keyframes animationname {
  0% {属性名:属性值;属性名:属性值;}
  50% {属性名:属性值;属性名:属性值;}
  100% {属性名:属性值;属性名:属性值;}
}

可以用 from 代替 0%,表示初始状态,用 to 代替 100%,表示结束状态

通过关键帧 keyframes 我们将一系列的属性变化带有了动画的即视感,还要通过 animation 来定义动画的持续时间,动画的执行次数等一系列属性

animation: myfirst 5s linear 2s infinite alternate;

animation: animation-direction;

animation-name 动画名称,此处的名称就是刚才我们定义关键帧时取的名字

animation-duration 动画执行时间,单位为秒或毫秒

animation-timing-function 动画变换速率,和 transition-timing-function 一样,具有 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier 变换方式

animation-delay 延迟,规定这个动画可以在延迟指定时间后再执行,单位为秒或毫秒

animation-iteration-count 动画执行次数,无限次为 infinite

animation-direction 运动方向,默认值为 normal,动画的每次循环都是向前播放;另一个值是 alternate,动画在奇数次正常播放,偶数次反向播放,即轮流反向播放

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 样式调试

    可能的原因有:① CSS 属性结束后,忘记添加分号 ;;② 分号使用了中文的,要使用英文的半角符号;③ 属性名称或属性值写错了

    Nian糕
  • JavaScript 常见面试题分析(一)

    这道题考察的是 JS 的变量类型,JS 的变量类型有值类型和变量类型两种,值类型包括 undefined、字符串、数字、布尔值,引用类型包括对象、数组、函数

    Nian糕
  • JavaScript 常见面试题分析(二)

    ④ call() 方法 apply() 方法 bind() 方法 (this 指向第一个参数)

    Nian糕
  • 搞定这些疑难杂症,向css3动画说yes

    本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

    IMWeb前端团队
  • 搞定这些疑难杂症,向css3动画说yes

    本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。

    IMWeb前端团队
  • 全用户态网络开发套件 F-Stack 架构分析

    本文介绍 F-Stack 的详细架构及如何解决了内核协议栈面临的问题。

    F-Stack
  • 全用户态网络开发套件F-Stack架构分析

    F-Stack是一个全用户态(kernel bypass)的高性能的网络接入开发包,基于DPDK、FreeBSD协议栈、微线程接口等,适用于各种需要网络接入的业...

    F-Stack
  • nyoj-----42一笔画问题

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一...

    Gxjun
  • Java 14 来势汹汹,这回让空指针无处遁形!!

    相信在坐的每一位 Java 程序员都遇到过空指针异常:NullPointerException(NPE),不甚其烦。

    Java技术栈
  • JQuery干货篇之处理元素

    作者说 本人秉着方便他人的想法才开始写技术文章的,因为对于自学的人来说想要找到系统的学习教程很困难,这一点我深有体会,我也是在不断的摸索中才小有所成,如果...

    爱撒谎的男孩

扫码关注云+社区

领取腾讯云代金券