CSS3开发之transition和animation的对比_用于定义完成过渡效果需要花费5s的代码-CSDN博客

本文链接：https://blog.csdn.net/chenlintao_csdn/article/details/88918324

本文介绍了一种利用CSS3动画实现按钮从暗到亮自动过渡的方法，无需用户交互。通过定义关键帧动画，设置初始和最终透明度，实现了平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在开发的过程中有这样的需求：让某一个按钮标签一开始处于隐藏的状态。然后，随着页面的价值，按钮标签慢慢地从暗变到亮，整个过程都是自动完成的，无需用户操作。

寻找解决思路

由于一开始的思路是：想让按钮标签从暗变到亮这个过程应该属于过渡的效果。于是：顺着这个思路，我查询了大量有关transition的资料。然而，我发现大多数网站都把用户鼠标滑过或者点击了某个标签使得标签的某些状态发生了改变作为示例。而这明显不符合我的需求，于是我另寻它法，找到了animation，即：动画效果。结果一尝试，确实符合了我的预期。

.second_part_container .second_part_button_container button{
    width:400px;
    height: 100px;
    color: #fff;
    font-family: "微软雅黑";
    background-color:#000000;
    text-align: center;
    font-weight: bolder;
    font-size: 36px;
    border-radius: 16px;
    /*transition-property: opacity;*/
    /*transition-duration: 5s;*/
    /*transition-timing-function: linear;*/
    /*!* Safari *!*/
    /*-webkit-transition-property:opacity;*/
    /*-webkit-transition-duration:5s;*/
    /*-webkit-transition-timing-function:linear;*/
    animation-name: button_show;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    -webkit-animation-name:button_show; /*Safari and Chrome*/
    -webkit-animation-duration:5s; /*Safari and Chrome*/
    -webkit-animation-delay:0s; /*Safari and Chrome*/
    -webkit-animation-iteration-count:1; /*Safari and Chrome*/
}
@keyframes button_show
{
    from {opacity:0.1;}
    to {opacity:0.9;}
}

@-webkit-keyframes button_show /*Safari and Chrome*/
{
    from {opacity:0.1;}
    to {opacity:0.9;}
}

关键属性解析

transition-property: 用于指定需要实现过渡的属性名称。它有三个值：
1）none: 表示没有属性会获得过渡效果。
2）all: 表示所有属性都将获得过渡效果。
3）property: 定义需要实现过渡效果的属性名称列表，列表以逗号分隔(如上面代码中的transition-property: opacity;就属于这种类型)。
transition-duration: 用于定义完成过渡效果需要花费的时间(以秒或毫秒计算)，默认值为0。
transition-timing-function: 指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。它有六个值:
1）linear: 规定以相同速度开始至结束的过渡效果(用得最多)。
2）ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果。
3）ease-in: 规定以慢速开始的过渡效果。
4）ease-out: 规定以慢速结束的过渡效果。
5）ease-in-out: 规定以慢速开始和结束的过渡效果。
6）cubic-bezier(n,n,n,n): 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。
动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS3中的动画的默认持续时间为0，因此至少必须定义动画的名称和持续时间，如果省略持续时间，动画将无法运行。通常，我们还通过使用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于“0%”和“100%”，0%是动画的开始，100%是动画的完成。
animation-name: 规定@keyframes动画的名称，即：为@keyframes动画指定名称。
animation-duration: 规定动画完成一个周期所花费的秒或毫秒，默认是0。
animation-timing-function: 指定动画将如何完成一个周期，其使用的数学函数，称为三次贝塞尔曲线，速度曲线。与“transition-timing-function”类似，也有“linear”、“ease”、“ease-in”、“ease-out”、“ease-in-out”和“cubic-bezier(n,n,n,n)”等值。
animation-fill-mode: 规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式。
animation-delay: 定义动画什么时候开始，单位可以是秒(s)或毫秒(ms)。允许负值，-2s使动画马上开始，但跳过2秒进入动画。
animation-iteration-count: 定义动画应该播放多少次。默认值为1。当定义为: infinite时，指定动画应该播放无限次。
animation-direction: 定义是否循环交替反向播放动画。如果动画被设置为只播放一次，该属性将不起作用。
animation-play-state: 指定动画是否正在运行或已暂停。