CSS 动画基础概念和帧概念

基础概念

动画：是由许多静止的画面（帧）以一定的速度(如每秒30张)连续播放肉眼因视觉残像产生错觉而误以为是活动的画面主要包括以下几个方面：

• 首先需要选择要进行动画的HTML元素。可以通过CSS选择器来选中元素，并为其应用动画效果。

• 关键帧是动画中的关键状态，用来指定动画在不同时间点的样式。在CSS中，可以通过@keyframes规则来定义关键帧，指定元素在动画的不同阶段应用的样式。

• CSS提供了一系列的动画属性，用来定义动画的持续时间、动画的速度效果、延迟时间、循环次数等。其中包括animation-duration（动画持续时间）、animation-timing-function（动画速度曲线）、animation-delay（动画延迟时间）、animation-iteration-count（动画循环次数）等。

• 通过在元素的样式表中应用动画属性和关键帧，使得元素能够呈现出相应的动画效果。

帧： 每个静止的画面都叫做帧

• 在CSS中，帧（frames）一般是指动画中的每一帧，也可以理解为动画的时间段。在CSS中，动画可以被分解为一系列连续的帧，每一帧展示动画中的一个瞬间。在CSS动画中，并没有直接用到"frames"这个术语，而是通过关键帧（keyframes）来定义动画中的特定状态或时间点。

• 关键帧（keyframes）是用来定义动画中的特定状态或时间点的关键概念。通过@keyframes规则，可以定义动画的关键帧，并在其中指定元素在动画的不同阶段应用的样式。在关键帧中，可以指定动画的开始状态、中间状态和结束状态，以及在动画特定时间点的样式属性。

• 通过定义关键帧，可以实现在CSS中创建丰富的动画效果。通过定义不同的关键帧状态，可以实现元素在不同时间点上的动画效果，包括平移、旋转、缩放、淡入淡出等。使用关键帧和动画属性，可以创建各种各样的动画效果，为网页增添生动和吸引人的交互和视觉效果。

动画属性

1. animation-name: 绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画
2. animation-duration:动画的完成时间，告诉 系统动画持续的时长
3. animation-delay:动画在启动前的延迟间隔
4. transition-timing-function:规定速度效果的速度曲线
5. animation-iteration-count：规定动画应该播放的次数(n or infinite)
6. animation-direction：规定是否应该轮流反向播放动画(normal or alternate)
7. animation-play-state：告诉系统当前动画是否 需要暂停
8. animation：关键帧的名称，动画持续的时间，运动状态

.case { animation: mymove 5s ease-in-out infinite alternate }

@keyframe

创建动画的原理是，将某一种 CSS 样式随着时间推进逐渐变为另一套样式。@keyframes 通过指定动画中特定时间点必须展现的关键帧样式来控制CSS动画的中间环节。

1. animationname:定义动画的名称
2. keyframes-selector:动画时长的百分比。合法的值：0-100% ,from, to
3. css-styles 一个或多个css样式

<view class="skeletonGoods flex align-center" v-for="(item,index) in goodsList" :key='index'>
    <view class="skeleton skeletonImg"></view>
    <view class="flex flex-column justify-between" >
            <view class="skeletonName skeleton flex align-center"></view>
            <view class="flex align-center justify-between">
		<view class="flex skeleton skeletonCon"></view>
		<view class="addCartImg skeleton skeletonCart"></view>
            </view>
     </view>
</view>
background-image: linear-gradient(90deg, #eee 25%, #fff 37%, #eee 63%);

animation: skeleton-loading 1s infinite;

@keyframes skeleton-loading {
	/*右下角 中间*/
	0% {
		background-position: 100% 50%;
	}
	/*左上角 中间*/
	100% {
		background-position: 0 50%;
	}
}

贝塞尔曲线

什么是贝塞尔曲线，点这里

购物车加入动画CSS

购物车加入动画JS

计算坐标对象