CSS3 动画基本使用

css 使用 transition(平滑过渡) 、animation (动画) 、transform (转换)实现动画效果。

transition 过渡

CSS3 过渡是元素样式改变的效果,需要规定希望将效果添加到的CSS属性和效果的时长。

属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
  • transition

    • transition:transition-property transition-duration transition-timing-function transition-timing-delay
    • transion:transition-property transition-duration
  • transition-property

  • transition-timing-function

    描述
    linear 规定以相同速度开始和结束的过渡效果(等同于cubic-bezier(0,0,1,1))。
    ease 慢速开始,然后变快,然后慢速结束(等同于cubic-bezier(0.25,0.1,0.25,1))。
    ease-in 以慢速开始(等同于cubic-bezier(0.42,0,1,1))。
    ease-out 以慢速结束(等同于cubic-bezier(0,0,0.58,1))。
    ease-in-out 以慢速开始和结束(等同于cubic-bezier(0.42,0,0.58,1))。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

实例:

应用于宽度属性的过渡效果,时长为 2 秒。

div{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s; 
    -moz-transition:width 2s;		/* Firefox 4 */
    -webkit-transition:width 2s;	/* Safari 和 Chrome */
    -o-transition:windth 2s;		/* Opera */
    -ms-transition:width 2s;		/* IE 9 */
}
div:hover{
    width:300px;
}

CSS 属性改变的典型时间是鼠标指针位于元素上时,当指针移出元素时,逐渐变回原来的样式。

animation 动画

使用 @keyframe 规则创建动画。在@keyframe中规定某项CSS样式,结合animation属性实现动画效果。

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性。除了animation-paly-state
animation-name @keyframe 动画名称
animation-duration 完成一个周期所花费的秒或毫秒
animation-timing-function 动画的速度曲线,默认ease
animation-delay 动画何时开始
animation-iteration-count 动画被播放的次数,默认1
animation-direction 动画是否在下一周期逆向地播放。默认normal
animation-play-state 动画是否正在运行或暂停。默认running
animation-fill-mode 动画时间之外的状态
  • @keyframe 定义和语法

    创建动画的原理是将一套css 逐渐改变为另一套css。

    以百分比来规定改变的时间,或者通过关键字 fromto,等价于 0% 和 100%

    语法:

    @keyframes name { keyframe-selector {css-styles;} }

    @-moz-keyframes mymove /* Firefox */
    @-webkit-keyframes mymove /* Safari 和 Chrome */
    @-o-keyframes mymove /* Opera */
    
    描述
    name 必填。动画名称
    keyframe-selector 必填。动画时长的百分比。合法值:0 - 100%、from(等同0%)、to(等同100%)
    css-styles 必须。一个或多个合法css属性

    实例:

    /* 两秒内将div宽度从200px 改变到 300px */
    /* 语法一 */
    @keyframe widthChange{
        from{ width:200px;},
        to{ width:300px;}
    }
    /* 语法二 */
    @keyframe widthChange{
        0%  { width:200px;},
        50% { width:250px;},
        100%{ width:300px;}
    }
    
    div{
        width:200px;
        height:200px;
        background-color:#fff;
        animation:widthChange 2s;
    }
    
  • animation

    按照属性表中属性的顺序,可以是两个或者多个。

    例如:animation:animation-name animation-durationanimation:animation-name animation-duration animation-timing-function

  • animation-timing-function

    transition-timing-function 值相同。

  • animation-direction

    描述
    normal 默认值。动画正常播放
    alternate 动画逆向播放
  • animation-play-state

    描述
    paused 规定动画已暂停。
    running 规定动画正在播放。
  • animation-fill-mode

    描述
    none 不改变默认行为。
    forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    both 向前和向后填充模式都被应用。

transform 转换

通过转换,能够对元素进行移动、缩放、转动、拉伸或拉长。

新的转换属性

下面的表格列出了所有的转换属性:

属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。

2D转换

函数 描述 示例
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。 值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 值 rotate(30deg) 把元素顺时针旋转 30 度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

3D转换

Opera 不支持 3D 转换。

  • 转换属性

    下面的表格列出了所有的转换属性:

    属性 描述
    transform 向元素应用 2D 或 3D 转换。
    transform-origin 允许你改变被转换元素的位置。
    transform-style 规定被嵌套元素如何在 3D 空间中显示。
    perspective 规定 3D 元素的透视效果。
    perspective-origin 规定 3D 元素的底部位置。
    backface-visibility 定义元素在不面对屏幕时是否可见。
  • 3D 转换方法

    函数 描述
    matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z) 定义 3D 转化。
    translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
    translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
    translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
    scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
    scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿 X 轴的 3D 旋转。
    rotateY(angle) 定义沿 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
    perspective(n) 定义 3D 转换元素的透视视图。

样例

满屏泡泡

满屏泡泡主要是实现不同大小的多个 3D 球体在屏幕上从下到上的运动的效果。

实现步骤:

  • 画3D球体

    • 先画圆
    • 加径向渐变
  • 动画

  • js控制

    • 控制每个球体动画的延迟时间和一个周期时间

    • 控制不同球体的位置、大小、径向渐变

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>泡泡全屏动画-demo</title>
	<style type="text/css">
		body{
			background-color: #050647;
			overflow: hidden;
		}
		.circle{
			position: absolute;
			border-radius: 50%;
			top: 100%;
			animation-name: move;
			animation-iteration-count: infinite;		/* 一直循环运动 */
			animation-timing-function: linear;
		}
		
        /* 动画-改变球体的top属性 */
		@keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
		@-webkit-keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
	</style>
</head>
<body>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	
	<script type="text/javascript">
		var colors = ['#e22571','#8A2BE2','#985525','#45832a','#90afe2'];
        //遍历每个球体
		var divs = document.querySelectorAll('.circle');
		for (var i = 0; i < divs.length; i++) {
			var index = Math.ceil(Math.random()*colors.length);
			var color = colors[index];
            //设置径向渐变
			divs[i].style.background = 'radial-gradient(circle at 15px 15px,' + colors[index] + ', #aa2c9e)';
            //设置大小和位置
			var wh = (Math.random()*40 + 10) + 'px';
			divs[i].style.width = wh;
			divs[i].style.height = wh;
			divs[i].style.left = Math.ceil(Math.random()*100) + '%';
            //设置动画何时开始
			divs[i].style.animationDelay = Math.ceil(Math.random()*6) + 's';
            //设置动画的一个周期时间
			divs[i].style.animationDuration = Math.ceil(Math.random()*5) + 's';
		}
	</script>
</body>
</html>

心跳

实现步骤:

  • 画心形

    大概画图步骤,先画一个固定大小的div,使用伪类 afterbeforeposition:absolute 构建两个长方形,之后长方形上边两个角使用 border-radius:50% 50% 0 0 控制,然后做 2D旋转一定角度(transform:rotate(45deg)),最后再填充背景色即可。

  • 动画

    控制心形在1s内放大两次。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>心跳</title>
	<style type="text/css">
		.heart{
			margin: 25%;
			width: 200px;
			height: 200px;
			animation: heart 1s infinite;
		}
		.heart:before,.heart:after{
			content: '';
			position: absolute;
			width: 130px;
			height: 200px;
			background: red;
			border-radius:50% 50% 0 0;
		}
		.heart:before{
			right: 0;
			transform: rotate(49deg);
		}
		.heart:after{
			transform: rotate(-49deg);
		}
		
		@keyframes heart{
			0% {transform: scale(1,1); }
			30% {transform: scale(1.1,1.1); }
			50% {transform: scale(1,1); }
			75% {transform: scale(1.1,1.1); }
			80% {transform: scale(1,1); }
			100% {transform: scale(1,1); }
		}
	</style>
</head>
<body>
	<div class="heart"></div>
</body>
</html>
posted @ 2020-08-27 13:51  听卉  阅读(314)  评论(0编辑  收藏  举报