CSS的动画

CSS的动画

在本节,我们将学习keyframes动画。

1. 动画的基本使用

1. 定义动画

定义动画有两种写法:

  1. 简单定义方式

    @keyframes 动画名 {
      /* from代表初始状态 */
      from {
        /*property1:value1*/
        transform: translate(0%);
      }
      /* to代表结束状态 */
      to {
        transform: translate(200%);
      }
    }
    
  2. 完整定义方式

    @keyframes 动画名 {
      /* 使用百分比来控制动画进程 */
      25% {
        /*property1:value1*/
        transform: translateX(50%);
      }
      50% {
        transform: translateY(100%);
      }
      75% {
        transform: translateX(150%);
      }
      100% {
        transform: translateY(200%);
      }
    }
    

1.2 元素应用动画

给元素添加animation属性,一般常用有三个属性:

  • name 定义的动画名称
  • time 动画持续时间
  • liner 动画算法,infinite是动画无限循环
#box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  left: 0;
  top: 100px;
  /* name你定义的动画名称 time动画持续时间 liner动画算法  infinite动画无限循环*/
  animation: trans-auto 2s linear infinite;
}

1.3 代码演示

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>动画title>
		<style>
			#box {
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0;
				top: 100px;
				/* name定义的动画名称 time动画持续时间 liner动画算法  infinite动画无限循环*/
				animation: trans-auto 2s linear infinite;
			}

			@keyframes trans-auto {
				/* from代表初始状态 */
				from {
					transform: translate(0%);
				}
				/* to代表结束状态 */
				to {
					transform: translate(200%);
				}
			}
		style>
	head>
	<body>
		
		<div id="box">div>
	body>
html>

1.4 演示效果

我们可以看到粉色的方块进行无线地平滑运动。

CSS的动画_第1张图片

2. 动画的其他属性

2.1 animation-timing-function

设置动画的类型,常用的值如下:

  1. ease : 平滑动画(默认)
  2. linear : 动画线性过渡
  3. ease-in : 从慢到快
  4. ease-out :从快到慢
  5. ease-in-out :先慢再快后慢
  6. step-start : 等同于 steps(1, start)
  7. step-end : 等同于 steps(1, end)
  8. cubic-bezie ( number, number, number, number): 特定的贝塞尔曲线类型

制作贝塞尔曲线的网页https://cubic-bezier.com/#.17,.67,.83,.67

2.2 animation-iteration-count

指定动画的播放次数 ,有两个值:

  1. number :动画循环次数
  2. infinite : 无限循环

其他属性可以去MDN查看:https://developer.mozilla.org/zh-CN/docs/Web

你可能感兴趣的:(CSS,css,前端)