【学习记录】CSS 动画简单使用

之前我基本都没用过动画，一般都用canvas做一些画图之类的。在前几次的vilin开发中，有过几个动画效果的需求，于是我学习了一下css的动画，这里简单记录一下。
css动画的特点就是简单，通过 css3创建的动画可以取代动画图片、Flash以及 JS等。

常见CSS动画效果

动画顾名思义可以动的图画，而这个“动”指的就是我们常见的图像变换：平移、旋转、放大、缩小，另外还包括颜色的变化：颜色加深变浅等。CSS里主要通过animation来实现元素的动画。

图像变换

用style里的transform属性来实现图像变换，然后通过animation属性来使元素动起来。

• 1、平移：translate(x, y); //x和y分别是平移的横纵分量，x>0时向右平移，y>0时向下平移；

（1）translateX(x)：沿x轴平移；
（2）translateY(y)： 沿y轴平移；

• 2、放缩：scale(x); //x是放缩的倍数，例如10为放大为原来的10倍，0.1为缩小为原来的0.1；

一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

• 3、旋转: rotate(x deg); //x表示顺时针旋转的度数；
• 4、倾斜：skew(x deg); //x表示倾斜的度数；

（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；

颜色变化

直接通过color（或者background等）和opacity属性就可以控制颜色变化了。

用transition直接实现动画

以下代码使class为ani-test的元素在hover时向右平移500px，向下平移300px，缩小为原来的0.3，并旋转45度，同时背景变为绿色。关于transition的具体使用可以看看这儿：https://www.w3school.com.cn/css3/css3_transition.asp。

	.ani-test {
	       transition: all 1s;
	}
	.ani-test:hover {
		background: green ;
		transform: translate(500px, 300px) scale(0.3) rotate(45deg);  
	}

用@keyframes 规则实现动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。keyframe顾名思义关键帧，就是注明关键帧的信息，例如下例中的0%、25%就是指动画运行到0%、25%时元素的部分style属性。将下例实验一下就很容易理解了，我就不再赘述了。

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

具体实践

云视讯官网 首页通知。在这个需求里我用css加js完成了动画效果，最后用scalajs去间接使用moveNotice这个函数。
CSS部分代码：

@keyframes disappear
{
    from { background: rgba(0, 0, 0, 0.7);}
    to {  background: transparent;}
}

@-ms-keyframes disappear
{
    from { background: rgba(0, 0, 0, 0.7);}
    to {  background: transparent;}
}

@-webkit-keyframes disappear /* Safari and Chrome */
{
    from { background: rgba(0, 0, 0, 0.7);}
    to {  background: transparent;}
}

@keyframes appear
{
    from {background: transparent;}
    to {background: rgba(0, 0, 0, 0.7); }
}
@-ms-keyframes appear
{
    from {background: transparent;}
    to {background: rgba(0, 0, 0, 0.7); }
}
@-webkit-keyframes appear /* Safari and Chrome */
{
    from {background: transparent;}
    to {background: rgba(0, 0, 0, 0.7); }
}

js部分代码：

function movNotice(flag)  {
            var n = document.getElementById("notice-dialog");
            var w = document.getElementById("warn");
            var d = document.getElementById("notice-div");
            if (n != null && w != null) {
                if(flag) {
                    offx = d.offsetLeft-n.offsetLeft-n.offsetWidth/2;
                    offy = d.offsetTop-n.offsetTop-n.offsetHeight/2;
                    n.style.transition = "all .5s";
                    n.style.transform = "translate("+offx+"px,"+offy+"px) scale(0.1)";
                    w.style.animation = "disappear 0.5s";
                    w.style.webkitAnimation = "disappear 0.5s";
                    setTimeout(function(){w.style.display = "none";},500);
                }
                else {
                    w.style.animation = "appear 0.2s ";
                    w.style.webkitAnimation = "appear 0.2s ";
                    n.style.transform = "translateX(-50%) translateY(-50%)";
                    w.style.display = "block";
                }
            }
        }

scalajs引用：

转载请注明本文url，引用请注明出处，谢谢支持！！！

参考：

• w3cschool：https://www.w3school.com.cn/css3/css3_animation.asp
• Html基本的动画效果（平移，旋转）：https://www.cnblogs.com/259751j/p/7841174.html
• 倾斜skew()方法: http://www.lvyestudy.com/css3/css3_9.5.aspx