css3过度与动画

最新推荐文章于 2022-09-28 13:10:48 发布

原创最新推荐文章于 2022-09-28 13:10:48 发布 · 892 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

本文详细介绍了CSS3中的过渡和动画效果。过渡通过指定属性和时长，实现元素样式平滑变化；例如，当鼠标悬停时，元素宽度渐变。动画则通过@keyframes规则定义一系列样式变化，并可调整动画速度曲线、延迟、方向和填充模式，实现复杂动态效果。这些特性极大地丰富了网页动态表现力，减少了对JavaScript和图片的依赖。

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

1.过渡

css3过渡是元素从一种样式逐渐改变为另一种的效果。

实现过渡须定义两项内容：

指定要添加效果的css属性
指定效果的持续时间。

案例：

div {
	width：100px;
	height:100px;
	background:width 2s;
	transition:width 2s;
}

解析:应用于宽度属性的过渡效果，时长2秒。

*如果未指定的期限，transition将没有任何效果，因为默认值是0。

css属性的值更改时效果会发生变化。一个典型css属性的变化时用户鼠标放在一个元素上时：

div:hover{
	width:300px;
}

解析：当实例中，当鼠标光标移动到该元素时，它逐渐改变原有样式。

1.1指定过渡的速度曲线：

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear 规定从开始到结束具有相同速度的过渡效果
ease-in 规定缓慢的过渡效果
ease-out 规定缓慢结束的过渡效果
ease-in-out 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) 允许您在三次贝塞尔函数中定义自己的值

#div1{ transition-timing-function:linear;}
#div2{ transition-timing-function:ease;}
#div3{ transition-timing-function:iase-in;}
#div4{ transition-timing-function:ease-out;}
#div5{ transition-timing-function:ease-in-out;}

案例：

<style>
        .div1{
            width: 300px;
            height: 300px;
            border-radius: 30%;
            background-color: lightpink;
            transition: all 5s cubic-bezier(0,1.9,1,-2.47);/*过渡   速度     过渡曲线*/
            /* transition-timing-function: steps(5,steps); */
        }   
        .div1:hover{
            height: 400px;
            width: 600px;
            background-color: mediumorchid;
        }
    
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

2.动画

css可以创建动画，它可以取代许多页面动画图像，Flash动画和JavaScript实现的效果。

2.1@keyframes规则

如果你在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

@keyframes div_animation {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }

2.2延迟动画

animation-delay 属性规定动画开始的延迟时间。

2.3反向或交替运行动画

anieation-direction属性指定是向前播放、向后播放还是交替播放动画.

animation-direction 底性可接受以下值:

normal-动画正常播放(向前)。默认值

Teverse动画以反方向播放（向后)

alternate-动画先向前播放，然后向后

alternate-reverse -动画先向后播放,然后向前

2.4指定动画的速度曲线

animation-timing-funetion网性规定动画的速度曲线。

animation-timing-function属性可接受以下值:

ease-指定从慢速开始,然后加快,然后缓慢结束的动画（默认)

linear-规定从开始到结束的速度相同的动画

ease-in -规定慢速开始的动画

ease-outT规定慢速结束的动画

ease-in-out-指定开始和结束较慢的动画

cubic-bezier(n,n,n,n)的·运行您在三次贝塞尔函数中定义自己的值

2.5指定动画的填充模式

CSS动画不会在第一个关健帧播放之前或在最后一个关键帧播放之后影响元素。 animation-fill-node 属性能够覆盖这种行为。

在不播放动画时(在开始之前，结束之后，或两者都结束时)，animation-fil-mode属性规定目标元素的样式. animation-fill-mode同性可接受以下值:

none-致认值。动画在执行之前或之后不会对元素应用任何样式。

foriards-元素将保器由最后一个关键帧设置的样式值(依赖animation-direction 和 animation-iteration-count) .

baclceards·元素将获取由第一个关键桢设誉的样式值《取决于animatian-ditection)，并在动画廷迟期可保留该值。

both -动画会同时逶循向前和向后的规则，从而在两个方向上扩展动画属性。