CSS3动画基础

时间  2020-06-09
标签 css3 css 动画 基础 栏目 CSS 繁體版
原文   原文链接

目录

编写页面
transition属性
贝塞尔曲线
transformcss

animation 和 keyframshtml

编写页面

记事本或SublimeText或vscode编写html:css3

<html>

<div id="box"></div>

<style>
#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
}

</style>

</html>

加上鼠标悬浮的效果:web

<html>

<div id="box"></div>

<style>
#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
}

/*鼠标悬浮后的样式*/
#box:hover {
    /*向下偏移50px*/
    top: 50px;
}
</style>

</html>

效果图以下:
浏览器

浏览器只渲染出“box”的初始状态, 和鼠标悬浮后的状态"top： 50px;", 效果较为生硬，可使用"transition"属性丰富视觉效果。函数

transition属性

  transition译做“过渡”，在css3中，transition属性用来设置元素过渡效果。
  transition包含4个子属性，分别为:测试

属性 说明 默认值
property 设置给元素的那个方面添加过渡效果，好比元素的"width"和"height"均发生改变时，能够指定该属性为"width",那么元素的"width"的变更才有过渡效果。"all"表示全部变更都加上过渡效果。 all
duration 设置过渡效果的持续时间，至少要给transition设置这个子属性，不然transition属性就没意义了。 0s
timing-function 过渡函数，该属性决定元素的过渡效果与时间的关系。 ease
delay delay即为“延迟”，表示该元素在加载后多久才开始过渡效果 0s

这几个元素的顺序以下:动画

transition: property duration timing-function delay;

修改上面的“#box”样式:网站

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    /*设置过渡效果 持续1秒，延迟500毫秒才开始*/
    transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
    /*兼容webkit内核*/
    -webkit-transition: 1s 500ms;
}

transition属性加在"#box"元素上，表示该元素变换时按设置的效果进行变换。

修改文件后能够发现过渡效果并无生效，这是由于"#box"没有设置"top"，只是在鼠标悬浮后才出现"top"属性，即解析器没有找到“top”过渡的“初始状态”，“过渡”就应该包含元素的初始状态和最终状态。.net

给"#box"加上"top: 0;":

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    top: 0;
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    /*设置过渡效果 持续1秒，延迟500毫秒才开始*/
    transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
    /*兼容webkit内核*/
    -webkit-transition: 1s 500ms;
}

效果以下:

关于timing-function，还能够选择"linear"(线性效果)、"ease-in"(渐进)等，想实现更好玩的效果，能够借助“贝塞尔曲线函数”。

关于transition属性——菜鸟教程传送门

贝塞尔曲线

贝塞尔曲线百度百科
关于贝塞尔曲线，有不少资料，再也不赘述。

贝塞尔曲线可视化
这是一个贝塞尔曲线函数可视化的一个网站，用这个网站能够直观地生成合适的动画加速度函数。

  如上是网站的界面，函数的参数分别为坐标系上红球的x轴坐标、y轴坐标和蓝绿球的x轴坐标和y轴坐标。坐标系横轴为时间，纵轴为动画的 progress, 直译过来是进程、进展的意思，映射到平移上就是指移动的点到原点的偏移量。曲线的斜率，反映的是动画的加速度。
  动图中两个方块是自定义动画与线性动画的对比。自定义动画后面具备弹跳的效果，在左上角坐标系上表现为后段往下的凹陷。动画的总体效果是元素离原点的距离愈来愈远，到后段反而离近一点点，而后又远离，直至到达终点。

选择合适的函数“cubic-bezier(.37,1.44,.57,.77)”设置到"#box"元素中:

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    top: 0;
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; 
    /*兼容webkit内核*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}

效果如图:

transform

  以上说起的动画效果都是给元素设置初始状态和最终状态，而后让浏览器自动渲染的，这种叫“补间动画”，即定义初始和结束状态，浏览器自动计算并补充“中间的状态”最后渲染出来，“补间动画”在flash，AE之类的软件均可以看到。
  上面例子是已经知道了"box"的初始状态"top: 0;"了，那万一有的需求是一开始不知道“box”的位置呢，那该如何使得"box"向下移动？那就是"transform"属性的功劳了。
  "transform"就是“改变形态”的意思，就是“汽车人变形”里的“变形”，经过“transform”属性能够改变元素的状态。
  transform包含不少的变换效果，一一介绍。

translate

translate是“转变，转为”的意思，在css3中，translate是transform的子属性，用来平移元素。
translate包含以下几种使用方法：

名称 描述 示例
translateX(x) 表示水平移动，x为负是往左，为正则向右移动 transform: translateX(10px)
transform: translateX(-15%)
translateY(y) 竖直移动，y为负向上，为正向下 同上
translateZ(z) 需配合“perspective()”使用，perspective()用来定义“景深”。z为负时是远离用户(屏幕)，正是接近用户 transform: perspective(500px) translateZ(200px)
translate(x, y) 二维平面的移动，是最前面两个的结合 简单
translate(x, y, z) 三维空间的移动，最前面三个的结合 同上

把上面的html改为以下，效果同样：

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; 
    /*兼容webkit内核*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}

/*鼠标悬浮后的样式*/
#box:hover {
    /*向下偏移50px*/
    transform: translateY(50px);
    /*兼容webkit*/
    -webkit-transform: translateY(50px);
}

scale

scale就是缩放的意思，对元素进行缩放变换。包含:

  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • scale(x, y)
  • scale3d(x, y, z)

用法与translate一致，只是参数是表示缩放的倍数，“1”表示原来的一倍（不放大不缩小），“0.5”缩小到原来一半，“2”变为原来两倍。

transform: scale(.5);

rotate

旋转变换，包含:

  • rotate(angle): 最简单的旋转变换，angle为负逆时针，为正是顺时针
  • rotateX(angle): 绕着X轴旋转
  • rotateY(angle): 绕Y轴旋转
  • rotaleZ(angle): 绕Z轴旋转
  • rotate3d(x,y,z,angle): 这个复杂一点，是在空间直角坐标系(x,y,z)中选择一个点，而后该点与原点（0,0,0）连成一条线，而后元素绕该线旋转。
    1. rotate3d(1,0,0,180deg)等价于rotateX(180deg)
    2. rotate3d(0,1,0,180deg)等价于rotateY(180deg)
    3. rotate3d(0,0,1,180deg)等价于rotateZ(180deg)
transform: rotate(180deg);

skew

倾斜变换，包含:

  • skewX(angle): 相对X轴倾斜,X轴方向上不变，Y轴旋转angle度。
  • skewY(angle): 相对Y轴倾斜，同上。
  • skew(x-angle, y-angle): 结合起来。

skew不太好理解，结合例子来看：
1、

transform: skewX(45deg);


能够看到“测试字样”在X轴上没有变化，向着Y轴方向旋转45度。

2、

transform: skewY(45deg);


在Y轴方向上没变，"box"的竖边仍与Y轴平行，横边则向着X轴方向旋转45度。

3、

transform: skew(45deg,45deg);

skew很差理解，这里贴出两篇文章：

matrix

矩阵变换，包含:

  • matrix(n,n,n,n,n,n)
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

其它的变换均可以由矩阵变换得到，这是线性代数的知识，学的都还给老师了.......

对CSS3中的transform：Matrix（）矩阵的一些理解

perspective

用于定义景深，与上面提到的3d变换配合使用，景深就是元素离眼睛（屏幕）的距离，在电脑上，图形经过变换来让咱们眼睛看到的图形产生距离感，大概就是近大远小之类的。

transform: perspective(500px) rotate3d(1, 0, 0, 45deg);

transform-origin

transfor-origin属性用来设置元素变换的基点。默认的，rotate绕元素中点旋转，若是想让元素绕左上角旋转，能够把transform-origin设置为：

transform-orgin: 0% 0%;

示例：

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; /*过渡效果*/
    transform-origin: 0% 0%;/*设置动画的基点*/
    /*兼容webkit内核*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
    -webkit-transform-origin: 0% 0%;

}

/*鼠标悬浮后的样式*/
#box:hover {
    transform: rotate(45deg);
    /*兼容webkit*/
    -webkit-transform: rotate(45deg);
}


注意，"transform-origin"属性是放在"#box"上而不是"#box:hover"

animation和keyframes

  上面提到的动画均为补间动画，自定义初始和结束的状态，由浏览器计算渲染中间状态。这些初始和结束的关键状态，能够称为“关键帧”，即“keyframes”。若是咱们想实现更为精细的动画效果，想在元素变换的“过程当中”也加上特定的“状态”，即插入“关键帧”，能够经过 “keyframes” 和 “animation” 属性实现。
  animation包含8个子属性:

名称 描述
name keyframe的名称
duration 持续时间
timing-function 速度曲线
delay 延迟多久才开始
iteration-count 播放的次数,一整个动画流程为一次
direction 是否在播放完后再反向播放
fill-mode 动画不播放时的样式
play-state 动画的状态，正在运行仍是暂停

keyframe的定义以下:

@keyframes name{
    percentage1 {state1}
    percentage2 {state2}
}

/*兼容webkit*/
@-webkit-keyframes name{
    percentage1 {state1}
    percentage2 {state2}
}

name 是关键帧的名称
percentage 是动画周期的时刻百分比，即整个动画周期的第百分之几的时刻，50%表示播放到一半，30%表示动画播放到百分之30.
state 是该时刻的元素状态，如“top: 10px”，此刻元素距离上方的距离。

修改html文件:

<html>

<div id="box" style="line-height: 100px; text-align: center;">测试</div>

<style>

/*关键帧*/
@keyframes test{
    0%,20%,50%,80%,100%{transform: translateX(0)}
    40%{transform: translateX(30px)}
    60%{transform: translateX(15px)}
}

/*兼容*/
@-webkit-keyframes test{
    0%,20%,50%,80%,100%{-webkit-transform: translateX(0)}
    40%{-webkit-transform: translateX(30px)}
    60%{-webkit-transform: translateX(15px)}
}

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*宽度*/
    height: 100px; /*长度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加点圆角*/
    transition: 1s linear 500ms; /*过渡效果*/
    -webkit-transition: 1s linear 500ms; /*过渡效果，兼容webkit内核*/
}

/*鼠标悬浮后的样式*/
#box:hover {
    animation:test 1s 0s ease both; /*绑定关键帧*/
    -webkit-animation: test 1s 0s ease both; /*兼容*/
}
</style>

</html>

效果：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程