CSS3-第五部分-动画

1，函数

函数包含

函数名称：在我们需要调用这个函数的时候，我们一般都是使用方法名称调用

参数：一般写在括号中，是改变我们整个函数运算的一个变化的一个值。

2，关于transform

我们在调用CSS3形变动画之前使用的CSS声明名称使用方法为：

transform:[transform-function]*;

例如我们调用平移函数--translate();

div:hover{
            transform: translate(50px,50px);
        }

3，平移函数translate（）；

div{
            width: 200px;
            height: 200px;
            background-color: red;

        }

        div:hover{
            /*
            平移函数有两个参数，
            第一个参数为x轴方向平移距离
            第二个参数为为y轴方向平移距离
            当x为正数时会向右移动，负数时向左移动
            当y为正数时会向下移动，负数时向上移动
            这两个参数都能为0
            */
            transform: translate(-10px,0px);
            /*transform: translate(-10px,0px);等同于下面的只修改X轴*/
            transform: translateX(-10px);
            
            /*transform: translate(0px,-10px);等同于下面的只修改Y轴*/
            transform: translateY(-10px);
            
        }

4，缩放scale（）；

div:hover{
    /*
    缩放函数
    第一个参数为x轴
    第二个参数为y轴
    此时我们填写的是缩放的倍数，为1时为原本的1倍（无变化）
    */
       transform: scale(4,1);
    
    /* transform: scale(4,1); 等同下面的只修改X轴 */
    transform: scaleX(4);
    
    /* transform: scale(1，4); 等同下面的只修改Y轴 */
    transform: scaleY(4);
 }

5，同时调用两个函数的写法

transform:translate(50px,50px) scale(2,1.5);

6，旋转rotate（）；

div:hover{
    /*
    该函数只有一个参数，是旋转的值。
    我们使用单位：deg
    正数为顺时针旋转x°
    负数为逆时针旋转x°
    元素不会改变形状，会发生旋转
    */
            transform: rotate(-45deg);
        }

7，倾斜skew（）；

div:hover{
    /*
      该方法两个参数，第一个是x轴，第二个是y轴
    我们使用单位：deg
    元素不会旋转，会改变形状
    */
            transform: skew(2deg,2deg);
        }

8，过渡

/*
   transition-propery:过渡的css的属性
   transition-duration:过渡完成需要的时间
   transition-timing-function:过渡的函数
        ease:速度由快到慢（默认值）
        linear:速度恒速（匀速运动）
		ease-in：速度越来越快（渐显效果）
		ease-out：速度越来越慢（渐隐效果）
		ease-in-out：速度先加速在减速（渐显渐隐效果）
   transition-delay:过度开始出现的延迟时间
*/
transition:[ransition-propery transition-duration transition-timing-function   transition-delay]
div{
            width: 200px;
            height: 200px;
            background-color: red;
 			margin；200px 0px 0px 500px;
    		/* 过度所有的效果，并且延迟时间一秒，过度速度先加速在减速，整体时间2秒*/
    	transition:all 2s ease-in-out 1s;
        }

div:hover{
    transform:scale(1.5,1.5)
}

9，CSS动画效果

/*
    animaation-name 我们使用@keyframs所申明得动画名称
 	animation-duration 动画时间
		XXXs
	animation-timing-function 动画方式
		linear 动画从头到尾的速度是相同的
		ease 默认，动画以低速开始，然后加速，在结束前变慢
		ease-in 动画以低速开始
		ease-out 动画以低速结束
		ease-in-out 动画以低速开始和结束
	animati-delay 延迟时间
	animati-itera-count 动画的次数
		值通常为整数，默认值为1
		特殊值infinite，表示动画无限次播放
	animation-direction 动画的方向
		normal，动画每次都是循环向前播放
		alternate 动画播放为偶数次则向前播放
	animation-play-state 动画的播放状态
		running将暂停的动画重新播放
		paused将正在播放的元素动画停下来
	animation-fill-mode 动画开始之前和结束之后发生的操作
		forwar表示动画在结束后继续应用最后关键帧得位置
 		backwar表示会在向元素应用动画样式时迅速应用动画的初始帧
		both表示元素动画同时具有forwards和backwards得效果

	完整语法：
 	animaation:animaation-name animation-duration animation-timing-function animati-delay animati-itera-count animation-direction animation-play-state animation-fill-mode;

*/

div{
    display:inline-block;
    width:200px;
    height:200px;
    background-color:red;
    margin:200px 0px 0px 500px;
    animation:abc 2s 1s linear infinnite normal running forwards;
}

@keyframes abc{
    0%{
        width:200px;
    }
    
    25%{
        width:200px;
        border-radius:10%
    }
    
    50%{
        width:200px;
        border-radius:20%
    }
    
    75%{
        width:200px;
        border-radius:30%
    }
    
    100%{
        width:200px;
        border-radius:50%
    }
}