css基础--过渡、动画

最新推荐文章于 2022-08-14 18:32:28 发布

张0x0

最新推荐文章于 2022-08-14 18:32:28 发布

阅读量222

点赞数

分类专栏： web前端基础学习 css学习文章标签：前端 css css3 animation

本文链接：https://blog.csdn.net/zxn200125/article/details/120871341

版权

web前端基础学习同时被 2 个专栏收录

80 篇文章 3 订阅

订阅专栏

css学习

12 篇文章 0 订阅

订阅专栏

过渡

过渡属性

transition与transform异同

动画

@keyframes规则

动画属性

过渡

css过渡可以在给定的时间内平滑地改变属性值

过渡属性

transition-property属性

作用：设置对象中参与过渡的属性

transition-property: all(默认)|none|<property>;
    transition-property: all;(默认)
    transition-property: none;
    transition-property:color,background-color,border-color;

all(默认)：css属性均可以进行过渡

none：不指定过渡效果

<property>：指定需要进行过渡的css属性，列表以逗号进行分隔；

transition-duration属性

作用：设置过渡持续时间，默认0（以s或ms计）

transition-duration:time;(s/ms)

transition-timing-function属性

作用：设置过渡动画类型

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

ease(默认)：平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))

linear：线性过渡。(=cubic-bezier(0,0,1,1))

ease-in：由慢到快。(=cubic-bezier(0.42,0,1,1))

ease-out：由快到慢。(=cubic-bezier(0,0,0.58,1))

ease-in-out：慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))

cubic-bezier(n,n,n,n)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间

transition-timing-delay属性

作用：过渡延迟时间，默认0（以s或ms计）

transition-delay:time;

transition属性

作用：简写，综合设置多个属性

transition:property duration timing-function delay;

transition与transform异同

transition是过渡属性，transform是2d/3d转换属性

相同点：

1.两者一般都会设置触发条件，例如设置伪类:hover等

2.均不会对其他元素布局产生影响

不同点：

1.transition过渡效果可以设置过渡时间、延迟、曲线等；transform变形是瞬间完成的变化，不能设置这些效果

2.transition过渡默认是对象左上角，不能改变；transform变形能设置对象中心点

3.transition过渡是针对元素属性进行改变；transform变形是针对整个元素进行改变

动画

@keyframes规则

作用：创建动画，指定一个css样式和动画逐步从目前样式更改为新样式

注：要使动画生效，必须将动画绑定到某个元素。并且必须定义动画名称和持续时间，若省略持续时间，由于默认值为0，动画将无法运行。

动画变化时间设置：百分比、from、to[使用关键词"from"或"to"，等同于0%(动画开始)和100%(动画完成)]

示例：

<style>
    /* 改变div背景色并且移动 */
    @keyframes name{
        0%  {transform:translate(0px); background-color: blueviolet;}
        25% {transform:translate(15px); background-color:brown;}
        50% {transform:translate(30px); background-color:burlywood;}
        75% {transform:translate(45px); background-color:cadetblue;}
        100%{transform:translate(60px); background-color:chartreuse;}
    }
    .name{
        width: 150px;
        transform: translate(30px);
        animation: name 2s linear;
    }  
</style>
<body>
    <div class="name">content</div>
</body>

动画属性

animation-name：设置对象应用动画名称，与@keyframes配合使用

animation-name:none(默认)|keyframename;

animation-duration：设置对象持续时间，默认值为0（以s或ms计）

animation-duration:time;

animation-timing-function：设置对象动画过渡类型

animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out
                          |steps(int,start|end)|cubic-bezier(n,n,n,n);

ease(默认)：平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))

linear：线性过渡。(=cubic-bezier(0,0,1,1))

ease-in：由慢到快。(=cubic-bezier(0.42,0,1,1))

ease-out：由快到慢。(=cubic-bezier(0,0,0.58,1))

ease-in-out：慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))

cubic-bezier(n,n,n,n)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间

animation-delay：设置对象动画延迟时间，默认值为0（以s或ms计）

注：允许负值，-3s使动画马上开始，但跳过3s进入动画

animation-delay:time;

animation-iteration-count：设置对象循环次数，默认1

animation-iteration-count:n|infinite;

n:数字，设置循环动画次数，默认1

infinite: 设置动画无限循环

animation-direction：设置对象在循环中运动方向

animation-direction:normal|reverse|alternate|alternate-reverse;

normal(默认)：动画正常正向播放

reverse：动画反向播放

alternate：动画奇数次正向播放，偶数次反向播放

alternate-reverse：动画奇数次反向播放，偶数次正向播放

animation-fill-mode：设置动画不播放时，要应用到元素的样式

animation-fill-mode:none|forwards|backwards|both;

none(默认)：不设置动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束或开始时的状态

animation-play-state：设置动画状态

animation-play-state:paused|running;

running(默认)：动画运行

paused：动画暂停

animation：复合属性，综合设置多个属性，默认值：none 0 ease 0 1 normal

animation:name duration timing-function delay iteration-count direction fill-mode play-style；

张0x0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础--过渡、动画

css中过渡和动画的相关使用规则
复制链接

扫一扫

专栏目录

css基础--过渡、动画

过渡

过渡属性

transition与transform异同

动画

@keyframes规则

动画属性

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