自定义动画、旋转基点知识点分享

本文主要是介绍自定义动画、旋转基点知识点分享，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、自定义动画

tips：transition属性叫过渡动画
@keyframes 叫关键帧动画

1、区别：

过渡动画是需要触发才能执行（比如hover 滑过时才有过渡）
关键帧动画打开浏览器马上执行不需要触发

2、实现关键帧动画分成两步

1>、定义关键帧动画（动画是怎么制作的？）

关键帧：

@keyframes 动画名称 {
from{ 开始的状态 }
to{ 结束的状态 }
}

关键帧：

        @keyframes bian {
/* 开始时（0%） 100px */
0%{
width: 100px;
   }
/* 结束时1000px */
100%{
width: 1000px;
   }
   }

2>、调用关键帧动画

  /* animation:动画名字 动画完成时间 动画的速度linear匀速 延迟时间 动画执行次数（infinite无限次） 是否反向执行*/animation:bian 2s linear 5s 2 alternate;bian  动画名字2s    动画的完成时间linear  匀速执行5s    动画延迟时间2     动画执行次数  infinite 代表无限次alternate  动画轮流反向执行animation-name: move;/* 动画名称，引用关键帧， */animation-duration: 2000ms;/* 动画的执行时间   m  ms  1s=1000ms *//* animation-timing-function:规定动画的运动曲线取值：linear  匀速ease；默认值  慢速开始---加速---慢速结束ease-in  以慢速开始ease-out 以慢速结束ease-in-out 以慢速开始和结束*/animation-timing-function: linear;/* 规定动画的运动曲线 */animation-delay: 1s;/* 动画的延迟时间 */animation-iteration-count: 2;/* 动画的执行次数   取值：n（次数）  infinite无限循环*//* animation-direction:规定动画反向播放取值：normal   不反向（默认值）alternate  反向播放*/animation-direction: normal;/* animation-fill-mode:规定动画播放之后显示的状态取值：forwards； 动画结束的状态backwards  动画开始的状态 （默认值）
*/animation-fill-mode: backwards;
注意：调用动画时，至少写两个值
animation:动画名字 完成时间；
案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;background-color: aqua;position: relative;/* 自定义动画 *//* animation: name duration timing-function delay iteration-count direction fill-mode; *//* animation: move 2s; */animation-name: move;/* 动画名称，引用关键帧， */animation-duration: 2000ms;/* 动画的执行时间   m  ms  1s=1000ms *//* animation-timing-function:规定动画的运动曲线取值：linear  匀速ease；默认值  慢速开始---加速---慢速结束ease-in  以慢速开始ease-out 以慢速结束ease-in-out 以慢速开始和结束*/animation-timing-function: linear;/* 规定动画的运动曲线 */animation-delay: 1s;/* 动画的延迟时间 */animation-iteration-count: 2;/* 动画的执行次数   取值：n（次数）  infinite无限循环*//* animation-direction:规定动画反向播放取值：normal   不反向（默认值）alternate  反向播放*/animation-direction: normal;/* animation-fill-mode:规定动画播放之后显示的状态取值：forwards； 动画结束的状态backwards  动画开始的状态 （默认值）*/animation-fill-mode: backwards;}.box1{width: 200px;height: 200px;background-color: red;position: relative;animation-name: move;/* 动画名称，引用关键帧， */animation-duration: 2000ms;/* 动画的执行时间   m  ms  1s=1000ms */animation-timing-function: linear;}@keyframes move {0%{top: 0px;left: 0px;}100%{top: 0;left: 600px;}}</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>
</html>

效果

1658153540031

二、旋转基点 transform-origin

1、元素在进行变幻的时候基准点默认是正中心

 /* 基准点的值 left  top  right  bottom  center */.three:hover{transition:transform 1s;transform: rotate(45deg);transform-origin: right bottom;}
/* 旋转基点transform-origin: 水平  垂直; 如果只有一个值，另一个值是 center*/

案例

<style>.box{width: 200px;height: 200px;border: 3px solid red;margin: 100px;}.inner{width: 200px;height: 200px;background-color: green;transform: rotateY(45deg);}.box .box1{/* 旋转基点transform-origin: 水平  垂直; 如果只有一个值，另一个值是 center*/transform-origin: left;}</style>
<body><div class="box"><div class="inner"></div></div><div class="box"><div class="inner box1"></div></div>
</body>

效果