css动画

最新推荐文章于 2024-06-19 13:20:48 发布

开心市民小杨儿

最新推荐文章于 2024-06-19 13:20:48 发布

阅读量485

点赞数 1

分类专栏：笔记文章标签：动画 css css3

本文链接：https://blog.csdn.net/qq_43743402/article/details/120953078

版权

笔记专栏收录该内容

41 篇文章 4 订阅

订阅专栏

一、transition语法

值	描述
transiton-duration	transition效果需要指定多少秒或者毫秒才能完成
transition-property	指定CSS属性的name，transition效果
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition中文意思为过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些放大缩小，隐藏显示等，下面我们一起来学习一下他的语法。

1、transiton-duration:
这是transition最基本的用法，transition-duration为动画执行所需的时间，这段代码的意思就是鼠标移入，div的宽高就会都变成150px。

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
}
div:hover{
    height:150px;	
    width:150px;
}

2、transition-property：
指定CSS属性的name，transition效果
这里transition-property值仅为width，意思值只给width加动画，所以会呈现这种效果，同样如果换成了height，那么将会是变高才会有动画。
并且transiton-property的默认值为all，只要不写这个属性，那就是全部变化都会执行动画。
3、transition-timing-function：
指定tarnsition效果的转速曲线

在这里插入图片描述
4、transition-delay:定义transition效果开始的时候

这里transition-delay的值为1s，意思是动画将在延迟一秒后执行。
总结：这四个属性简写为：
transition:property duration timing-function delay;

div{
    transition:all 1s ease-in-out 2s;
}

二、animation语法

翻译成中文就是动画的意思，熟练运用之后你可以用它来做各种各样炫酷的动画。

值	描述
@keyframes	定义一个动画，@keyframes定义的动画名称用来被animation-name所使用
animation-name	检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration	检索或设置对象动画的持续时间
animation-timing-function	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画的延迟时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画再循环中是否反向运动
animation-play-state	检索或设置对象动画的状态

1、@keyframes：定义一个动画，定义的动画名称用来被animation-name所使用。

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

@keyframes主要是做关键帧动画的，每个@keyframes后面都要跟一个名字，事例中使用了mymove作为帧动画的名字，然后可以在样式内对关联帧添加样式，然后根据关键帧@keyframes就能自动形成流畅的动画了。
2、animation-name：检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

3、animation-iteration-count:检索或设置对象动画的循环次数
这是animation-iteration-count的值为infinite,意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值，当执行你设置的次数后它会自动停止。
4、animation-direction:检索或设置对象动画在循环中是否反向运动
这里animation-direction的值为alternate,代表动画将会来回的反复执行，他还有其他属性，在下表给出供小伙伴们自己尝试。

在这里插入图片描述
5、animation-play-state：检索或设置对象动画的状态

<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">暂停</button>
    <button onclick="run()">恢复</button>
    <div></div>
</body>

function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}

animation-play-state的默认值为running，就是动画执行的意思，在实际应用中我们经常使用js来操作这个属性，从而控制动画的播放和暂停。
总结：8个animation属性

animation：name duration timing-function delay iteration-count
direction play-state;

div{
    animation:mymove 2s ease-in-out 3s infinite alternate running;
}

那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示，并且每次动画过后都会向相反方向执行动画。
三、transform语法：

transform 字面上就是变形，改变的意思。看起来他又很多属性，其实我们把常用的总结起来就是下面四个属性。

rotate(旋转)
skew（扭曲）
scale（缩放）
translate（移动）

值	描述
none	定义不进行转换
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图.

属性解析：
1、rotate旋转

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    0%   {transform:rotate(0deg);}	
    100%   {transform:rotate(360deg);}
}
@keyframes rotateX{
    0%   {transform:rotateX(0deg);}	
    100%   {transform:rotateX(360deg);}
}
@keyframes rotateY{
    0%   {transform:rotateY(0deg);}	
    100%   {transform:rotateY(360deg);}
}

.rotate{
    animation:rotate 2s infinite linear;
}
.rotateX{
    animation:rotateX 2s infinite linear;
}
.rotateY{
    animation:rotateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>

这里一共有三个属性的展示translate（x,y),translateX（x），translateY(y)。分别代表水平方向和垂直方向同时移动、仅水平方向移动、仅垂直方向移动。
2、scale 缩放

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes scale{
    0%   {transform:scale(0.1,0.1);}	
    100%   {transform:scale(1,1);}
}
@keyframes scaleX{
    0%   {transform:scaleX(0.1);}	
    100%   {transform:scaleX(1);}
}
@keyframes scaleY{
    0%   {transform:scaleY(0.1);}	
    100%   {transform:scaleY(1);}
}

.scale{
    animation:scale 2s infinite linear;
}
.scaleX{
    animation:scaleX 2s infinite linear;
}
.scaleY{
    animation:scaleY 2s infinite linear;
}

</style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>

这里一共三个属性的展示scale（x,y）,scaleX(x),scaleY(Y)。分别代表水平方向和垂直方同时缩放、仅水平方向缩放、仅垂直方向缩放。但是它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
3、skew扭曲

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    /* border-radius:50%; */
}
@keyframes skew{
    0%   {transform:skew(0deg,0deg);}	
    100%   {transform:skew(25deg,25deg);}
}
@keyframes skewX{
    0%   {transform:skewX(0deg);}	
    100%   {transform:skewX(25deg);}
}
@keyframes skewY{
    0%   {transform:skewY(0deg);}	
    100%   {transform:skewY(25deg);}
}

.skew{
    animation:skew 2s infinite linear;
}
.skewX{
    animation:skewX 2s infinite linear;
}
.skewY{
    animation:skewY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>

这里一共有三个属性的展示skew（x，y），skewX（x）,skewY(Y)。分别代表水平方向和垂直方向同时扭曲、仅水平方向扭曲，仅垂直方向扭曲。

以上便是css动画的所有内容。

开心市民小杨儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css动画

一、transition语法值描述transiton-durationtransition效果需要指定多少秒或者毫秒才能完成transition-property指定CSS属性的name，transition效果transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候transition中文意思为过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些
复制链接

扫一扫