CSS3动画 transform、transition、animation的介绍

最新推荐文章于 2023-02-27 15:45:16 发布

VIP文章 HzZyYYY

最新推荐文章于 2023-02-27 15:45:16 发布

阅读量351

点赞数

本文链接：https://blog.csdn.net/qq_44820039/article/details/105743341

版权

css3中新增了三个动画属性，在这之前写动画效果是需要用js才能完成。
这三个属性分别是：transtion transfrom animation

下面将对他们进行介绍

一、animtion
animation 复合属性，检索或设置对象所应用的动画特效，是CSS3中一个具有颠覆性的特征，通过设置多个点来控制图片的动画。

1.定义
通过 keyframes来定义，keyframe 就是关键帧
语法：

@keyframes name{
   
   0%{
   开始状态}
   100%{
   结束状态}}
}
@keyframes name{
   
   from{
   开始状态}
   to{
   结束状态}}
}

两种写法意思完全一样
调用 animation: 动画名称持续时间执行次数 alternate 运动曲线(linear线性) 延迟时间；（这些属性值不需要每个都写）

看到这里你可能还是有点懵，下面将详细介绍 animation的属性及属性值；

2.动画属性

animation-name
用来定义动画名称（必填）可以同时赋值多个动画名称。

.elem{
   
  animation-name: name;
}

animation-duration
用来设置动画播放所需要的时间
单位： “s” 为单位,默认值为 0没有动画效果
语法：

.elem{
   
  animation-duration: time;
}

animation-timing-function
用来设置动画的播放方式
有以下几种方式：
ease : 平滑过渡（默认值）
ease-in : 由慢到快
ease-out ：由快到慢
ease-in-o

关注