13动画样式

文章目录

13动画样式

1.定义
2.动画发生的基本实现条件
3.关键帧动画创造方式
4.🎈触发式（过渡）动画
5.🎈主动式动画

1.定义

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。（以上定义来自维基百科）

2.动画发生的基本实现条件

短时间内连续播放多张静态的帧(静态的图形)
每一帧图像内部物体的状态（形状，大小，角度，位置，颜色等）必须要发生变化

3.关键帧动画创造方式

用户需要定义第一帧和最后一帧，中间的帧数由计算机辅助生成
用户定义第一帧到最后一帧的动画时间（根据此时间计算机算出具体需要帮我们生成的帧数）

4.🎈触发式（过渡）动画

元素默认的状态赋予动画的第一帧，触发动作赋予元素动画的最后一帧。

常用触发动作：

1：鼠标悬浮（：hover）
2：选项选中（：checked）
3：输入框点击（：active）

动画参数	代码	详解
动画时间	transition-duration:3s;	定义一个动画从第一帧到最后一帧的动画时间，浏览器会根据该时间生成对应数量的中间帧数.一秒60帧。单位可以是ms和s
动画延迟	transition-delay：2s；	定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画
变化速率	transition-timing-function：ease；	定义动画从第一帧到最后一帧变化过程的速率变化默认值：ease（慢-快-慢）cubicbezier(0.25,1.0.1,0.25,0.1)慢速开始：ease-in;慢速结束：ease-out;慢速开始和结束：ease-in-out cubic-bezier(0.42,0,0.58,1);匀速：linear;贝赛尔曲线：https://cubic-bezier.com
过渡动画属性	transition-property: all;	定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等), 第一帧和最后一帧代表的就是该属性的值的变化(比如width的值从第一帧的100px,到最后一帧的500px)none：没有动画效果；all：所有的都参与动画，默认值为all。

复合写法：
过渡动画综合属性：属性名称过渡时间过渡动画时间函数动画延迟时间;

transition: property duration timing-function delay；

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            cursor: pointer;
            transition-duration: 2s;
            }
     	div:hover{
            width: 500px;
            height: 500px;
     }
  <style>

注：
在不添加动画效果时，hover显示时是一瞬间显示的，加了动画后，有渐变效果。transition也可以写在hover里，但效果不一样。如图中代码所示，鼠标移入移出均有动画效果，写在hover里之后，移入时将有动画效果，移出时将无动画效果。

5.🎈主动式动画

由用户自行创造关键帧，无需任何的动作触发。

与触发式动画的不同：用户可以自行创造多个关键帧，用来更加精细化的控制动画的整个过程。

创造方式：

@keyframes  动画名称 {
状态1 {
	样式名称1：样式值1；
}
状态2 {
	样式名称1 ：样式值2 ；
}
..... 
状态x {
	样式名称1 ：样式值3 ；
}
}

动画参数	代码	详解
动画名称	animation-name: jump;	给动画一个名字
动画时长	animation-duration: 1s;
动画次数	animation-iteration-count: infinite;	规定动画被播放的次数。默认是 1。
infinite:无限循环
时间函数	animation-timing-function: cubic-bezier(.47,1.6,.77,-2.33);
动画延迟	animation-delay: 2s;
动画是否正反向切换执行	animation-direction: normal;	normal：默认值，,每一次都是正向播放 alternate：正反向切换执行 reverse：反向执行 alternate-reverse：反正向切换执行
动画停止时状态是什么时刻的状态	animation-fill-mode: both;	backwards：保留第一帧；forwards：保留最后一帧；both：自适应
动画运行状态	animation-play-state: paused;	规定动画是否正在运行或暂停。默认是 “running”；paused暂停。可配合状态类伪类选择器操纵元素的动画状态

注：
激活主动式动画必须有名字和时间两个要素。

示例：

<style>
	<style>
        div {
            width: 300px;
            height: 300px;
            background-color: yellow;
            animation-name: jump;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            }
       @keyframes jump {
            0% {
                width: 500px;
                height: 100px;
            }
            50% {
                background-color: lightgreen;
            }
            100% {
                width: 300px;
                height: 200px;
                background-color: lightgreen;
            }
        }
        div:hover {
        	/* 鼠标移入暂停*/
            animation-play-state: paused;
        }
</style>
<body>
    <div></div>
</body>

来源：CSDN

作者：耶和华的宠儿

链接：https://blog.csdn.net/qq_46055080/article/details/104521985

标签

动画

动漫