过渡Transitions、动画Animation

1.CSS过渡-Transitions

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。

1.1 过渡三要素
  1. 必须要有属性发生变化

  2. 必须告诉系统哪个属性需要执行过渡效果

  3. 必须告诉系统过渡效果持续时长

1.2 过渡触发条件
  1. :hover 鼠标悬停触发
  2. :active 用户单击元素并长按鼠标时触发
  3. :focus 获得焦点时触发
  4. @media触发 符合媒体查询条件时触发
  5. 点击事件 用户点击元素时触发
1.3 过渡属性
1.3.1 transition-property

规定应用过渡的 CSS 属性的名称

取值:

none :没有属性会获得过渡效果

all :所有属性都将获得过渡效果

property: 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔,例如color,margin-left

1.3.2 transition-duration

规定完成过渡效果需要花费的时间(以秒或毫秒计),默认值为0

1.3.3 transition-timing-function

定过渡效果的时间曲线,默认值是 “ease”

取值:

linear :规定以相同速度开始至结束的过渡效果

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果

ease-in :规定以慢速开始的过渡效果

ease-out :规定以慢速结束的过渡效果

ease-in-out :规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n) :在 cubic-bezier 函数中定义自己的值,0 至 1 之间的数值

1.3.4 transition-delay

规定过渡效果何时开始,默认值是 0,即等待指定秒或毫秒数之后,切换效果开始

1.3.5 连写

transition : transition-property, transition-duration, transition-timing-function, transition-delay (过渡属性,持续时间,时间曲线,过渡延迟)

1.3.6 注意点
  1. 若给多个属性添加不同的过渡效果,用逗号隔开
  2. 连写的时可以省略后面的两个参数
  3. 若多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
    transition:all 0s;

2.CSS动画-Animation

由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes(关键帧)定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为

2.1 动画属性
2.1.1 animation-name

指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画

序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染

关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示

关键帧:	   
@keyframes 动画名称{                
	from{             
 		css-style;
	}
    to{
        css-style;
    }
    /*
    0%{}
    50%{}
    100%{}
    */
}
2.1.2 animation-duration

指定动画播放完成花费的时间,默认值为 0

2.1.3 animation-timing-function

时间曲线,诉系统动画执行的速度

取值:

linear :规定以相同速度开始至结束的过渡效果

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果

ease-in :规定以慢速开始的过渡效果

ease-out :规定以慢速结束的过渡效果

ease-in-out :规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n) :在 cubic-bezier 函数中定义自己的值,0 至 1 之间的数值

2.1.4 animation-delay

动画在启动前的延迟间隔,以秒或毫秒计,默认值为0

2.1.5 animation-iteration-count

动画的播放次数

取值:

n:数字,定义播放多少次动画

infinite:无限次往返执行

2.1.6 animation-direction

指定是否应该轮流反向播放动画

取值:

normal :默认的取值, 执行完一次之后回到起点继续执行下一次

alternate :往返动画, 执行完一次之后往回执行下一次

reverse :反向执行

2.1.7 animation-fill-mode

当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式

取值:

none: 不做任何改变

forwards: 让元素结束状态保持动画最后一帧的样式

backwards: 让元素等待状态的时候显示动画第一帧的样式

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

2.1.8 animation-play-state

当前动画是否需要暂停

取值:

running: 执行动画

paused: 暂停动画

2.1.9 连写

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

动画模块连写格式的简写

​ animation:动画名称 动画时长;

2.2 动画样式网站

网址:https://animate.style/

使用步骤:

1.引入animate的cdn或本地animate.css文件

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2.给指定元素class类名 “animate__animated <动效名称>”,以改变动画效果

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

3.过渡和动画的异同

不同点

过渡必须人为的触发才会执行动画

动画不需要人为的触发就可以执行动画

相同点

过渡和动画都是用来给元素添加动画的

过渡和动画都是系统新增的一些属性

过渡和动画都需要满足三要素才会有动画效果

4.2D转换模块——transform

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜

-旋转 rotate

​ transform: rotate(45deg);
​ 表示旋转45度,其中deg是单位,代表多少度

-平移 translate

​ transform: translate(100px, 0px);
​ 表示向水平方向平移100px

第一个参数:水平方向
​ 第二个参数:垂直方向

-缩放 scale

​ transform: scale(1.5);
​ transform: scale(0.5, 0.5);

第一个参数:水平方向
​ 第二个参数:垂直方向

注意点
  1. 如果取值是1, 代表不缩放
  2. 如果取值大于1, 代表放大
  3. 如果取值小于1, 代表缩小
  4. 如果水平和垂直缩放都一样, 那么可以简写为一个参数
-综合转换连写格式

​ transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

注意点
  1. 如果需要进行多个转换, 那么用空格隔开
  2. 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
-形变中心点

​ transform-origin

第一个参数:水平方向
​ 第二个参数:垂直方向

注意点

取值有三种形式

具体像素
​ transform-origin: 200px 0px;

百分比 transform-origin: 50% 50%;

特殊关键字
transform-origin: center center;

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

-旋转轴向

​ 默认情况下所有元素都是围绕Z轴进行旋转

transform: rotateZ(45deg);
​ 围绕z轴旋转

transform: rotateX(45deg);
​ 围绕x轴旋转

transform: rotateY(45deg);
​ 围绕y轴旋转

-perspective

添加到需要呈现近大远小效果的元素父元素上

属性定义3D元素距视图的距离,以像素计,该属性允许改变3D元素查看3D元素的视图,当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值