CSS动画学习

animation

定义关键帧

@keyframes  自定义的名称{
		from{
				CSS的属性值、多个
		}
		to{
			CSS的属性值、多个
		}
}

   @keyframes move {
            from{
                margin-left: 100px;
                background-color: violet;
            }
            to{
                margin-left: 10px;
                background-color: aquamarine;
                height: 100px;
                width: 100px;
            }
        }

@keyframes  username{
		0%{}
		20%{}
		60{}
		100%{}
}

@keyframes change {
            0%{margin-top: 100px;}
            25%{margin-top: 20px;}
            50%{margin-top: 70px;opacity: 0.3;} 
            100%{margin-top: 10px;}
        }
        @keyframes jump{
            0%{width: 100px;}
            25%{width: 25px;}
            60%{width: 70px;}
            100%{width: 300px;}
        }

调用关键帧

选择器{
animation-name:user-defined-name;//引入的关键帧
animation-duration:3s;//动画的时长
animation-delay:2s;//延时
animation-iteration-count:3/infinite; //重复次数
animation-timing-function:linner/ease/steps();//速度曲线
animation-play-state:running/paused //正在运行、停止运行(动画状态)
Animation-direction:normal/reverse/alternate/alternate-reverse

//Animation:name 3s 2s .. ..;//简写形式
}

属性	描述
animation-name	动画名称(每个名称代表一个由@keyframes定义的动画序列)
animation-duration	动画周期的时长
animation-timing-function	动画的速度曲线
animation-delay	动画延迟执行时间
animation-iteration-count	动画在结束前运行的次数
animation-direction	动画是否反向播放
animation-fill-mode	填充模式,设置CSS动画在执行之前和之后如何将样式应用于其目标
animation-play-state	设置动画暂停/恢复

 .one{
            /* 动画有自己的默认状态、开始状态、结束状态 动画执行完成后又恢复到自己的默认状态 */
            animation-name: move;
            animation-duration: 5s;
            /* 动画时长 */
            animation-iteration-count: infinite;
            /* 重复次数，默认为一次 infinite设定了有循环不停的动画 */
            /* 若此处有具体次数，执行状态：2s->to->from->to->from->恢复到自己的状态 */

            animation-delay: 2s;
            /* 动画开始前的延时 ，默认为0s，只会延时一次，自己的默认状态 */

            /* animation-direction: reverse; */
            /* 默认值normal：from->to
                reserve:to->from */
            animation-direction: alternate;
            /* 交替：from->to->from->to... */
            animation-direction: alternate-reverse;
            /* 反转交替：to->from->to->from */
            
            /* animation-play-state: paused; */
            /* 默认值为running，一般与js搭配使用，比如点击某处时暂停该动画 */

            /* animation-fill-mode: none; */
            /* 填充模式：延时、动画结束之后都是自己原来的状态 */

            /* animation-fill-mode: forwards; */

            /* animation-fill-mode: backwards; */
            /* 执行状态：2s to->...->自己的状态 */

            animation-fill-mode: both;
            /* 延时的时候使用的是第一帧，动画结束后是最后一帧 （使用这个的前提是animation-iteration-count有具体数值）*/

            animation-timing-function: linear;
            /* 在animation-direction中的运动速度  linear为匀速 */
        }
            .two{
            /* animation: change 3s; */
            /* 至少写动画名词和动画时长 */
            animation: change both 3s linear 2s infinite;
            /* 第一个时长为动画时长，第二个为延时时长 */
        }

transition 过渡

更改CSS属性时控制动画速度

选择器{
//CSS的属性值
transition:;//简写属性
}
选择器:hover{
//鼠标悬停时对应的CSS属性值
transition-property: all;
transition-duration: 0s;
transition-timing-function: ease;
transition-delay: 0s;
}

属性	描述
transition-property	过渡属性
transition-duration	过渡动画所需的时间
transition-timing-function	时间曲线
transition-delay	过渡延迟时间

 body>div:first-child{
            transition: background 2s linear 1s;
            /* transition与hover搭配使用 只能过渡一个属性 */
            /* animation与transition异同点：
                1.animation需先定义再使用，transition直接使用，需要搭配hover才能看到效果
                2.animation可以同时对多个css属性值进行动画 transition只可单值
                3.         页面一加载就会生效        页面加载没有效果
                4.都可以搭配hover */
        }

transform 变形

属性	描述
transform-origin	用于指定一个元素变形的原点

函数	描述
rotate	定义了一种将元素围绕一个定点旋转而不变形的转换
skew	对元素的剪切或者扭转
scale	更改元素的大小
translate	移动元素

      body>div:first-child{
           transform: rotatex(45deg);
           /* rotate为旋转 */
       }
       body>div:nth-child(2){
           /* transform: skew(45deg,20deg); */
            /* 在x轴、y轴上的倾斜 */
           transform: skewx(20deg);
       }
       body>div:nth-child(3){
           transform: scale(2,0.5);
           /* 缩放比例 在x、y轴上变化的倍数 */
       }
       body>div:nth-child(4){
           transform: translate(100px,200px);
           /* 移动 x、y轴上 */
       }