如何通过css样式设置动画，转换，过渡等界面效果

天我们学习的内容有：过渡，动画，转换，伸缩盒子。

可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~

1.过渡

在css3中，有一个属性可以设置过渡效果。

它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例：通过transition设置焦点过渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意页面中的代码：

第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。

第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位，设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。

所以，我们通过transition这个复合属性设置的过渡效果为：

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。

2.动画：

在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。

但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。

那么，动画animation就可以满足我们的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代码效果如下：

同样，让我们来关注编写的代码：

1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候，将left设置为0px，top设置为0px*/

0%{

left:0px;

top:0px;

}

/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，

背景颜色过渡为绿色，圆角过渡为0(无圆角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，

背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，

背景颜色过渡为灰色，圆角过渡为0(无圆角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，

背景颜色过渡为红色，圆角过渡为50%(正圆)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。

2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。

就是下面这句代码了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一个复合属性，设置了6个值，分别对应：

animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。

animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒

animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。

animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。

animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。

animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是

alternate则表示要反向播放动画，大家也可以自己试一试这个效果。

最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。

3.转换

在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子的位置是left:0,top:0;

但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。

B.旋转

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子应该是四四方方的。

但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。

进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。

C.缩放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放

scale的第一个参数为0.5,表示横向缩小为0.5倍

scale的第二个参数为0.25，表示纵向缩小为0.25倍。

scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。

小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。

4.flex布局

Flex布局，可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代码效果如下：

如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。

接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：

所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列

而flex-end是让所有的子元素从元素的右侧开始排列。

我们再来更改一下，将justify-content设置为center，效果如下图所示：

更厉害了，子元素在父盒子的中央位置排列显示了。

然后，我们再将justify-content设置为space-around，效果如下图所示：

它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。

所以我们推荐将justify-content设置为space-between，效果如下图：

我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。

这两个属性可以设置的值如下：

flex-wrap: nowrap;//不换行，会自动收缩

flex-wrap: warp;//换行，会自动收缩

flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。

flex-direction:row; //从左至右一行一行进行子元素的排列

flex-direction:column; //从上到下一列一列进行子元素的排列

flex-direction:row-reverse; //从右至左一行一行进行子元素的排列

flex-direction:column-reverse; //从下到上一列一列进行子元素的排列

案例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）

代码效果如下：

如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：

如果将flex-direction: column;,则会纵向排列元素，效果如下图：

除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。

除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下图：

我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.

这是什么意思呢？

四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。

同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。

原文来源于：黑马程序员社区

学习资源：

想学习css，可以关注：黑马程序员头条号，后台回复：css

SS3 transition属性允许CSS元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。接下来就一起去看看这个CSS3属性吧!

一、CSS3的transition属性

transition属性的作用就是指定当你的元素某些样式发生变化时，这些样式可以渐渐过渡到最终属性值。transition属性是一个简写的复合属性，其中包含了四个过渡属性。

1、transition 简写的复合属性，用于在一个属性中设置四个过渡属性。

2、transition-property 规定应用过渡的CSS属性的名称。

3、transition-duration 定义过渡效果花费的时间，默认是0。

4、transition-timing-function 规定过渡效果的时间曲线，默认是"ease"。

5、transition-delay 规定过渡效果何时开始，默认是0。

transition-property 用于产生过渡动画的单个或多个属性，或者过渡所有属性的关键字all。

transition-duration 渐变时间属性值为 “数值+s” ，代表多少时间完成过渡效果。

transition-timing-function 是可选属性值。

有如下可选值

1、linear线性过渡，ease(默认)平滑过渡，ease-in由慢到快、由快到慢，ease-in-out由慢到快再到慢，

2、step-start等同 steps(1, start)，step-end等同 steps(1, end)

3、steps()两个参数的步进函数。第一个参数为正整数，指定函数步数。第二个参数取值是start或end，指定每一步的值发生变化的时间点。第二个参数可选，默认值为end。

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

transition-delay可选属性值，设置延迟过渡(即设置多少时间后再开始过渡)，延迟的时间值为“数值+s”。该属性可以对多个不同的属性进行设置，用逗号隔开。

二，可用于过渡的属性

不是所有的样式都可以过渡，如说display:block不能过渡到display:inline-block。那么具体有哪些属性可以用于过渡呢？下面列举了部分可以用于过渡的属性

部分可用于过渡的属性示意图

三、兼容性

transition属性浏览器兼容性

注：Internet Explorer 9 以及更早的版本不支持 transition 属性，且Chrome 25 以及更早的版本，需要前缀 -webkit-。

使用过渡属性而不是脚本的另一个原因是脚本方法改变多个元素样式可能会产生冲突，transition过渡属性就不需要考虑这个问题元素与元素之间互不影响。元素过渡需要知道样式具体的起始属性和末尾属性，如宽度从10px变化到100px。

四、transition属性的运用

示例一

控制单个属性（如width）过渡

改变单个属性示例

示例二

控制多个属性(如transform,background,background,height)过渡。

element{

-webkit-transition:-webkit-transform 5s,background 5s,width 5s,height 5s;

-moz-transition-property:width,height,-o-transform,background,;

-moz-transition-duration:5s,5s,5s,5s;

-o-transition-property:width,height,-o-transform,background;

-o-transition-duration:5s,5s,5s,5s;

transition-property:width,height,transform,background;

transition-duration:5s,5s,5s,5s;

}

感谢您阅读了这篇文章，希望会对您有所帮助。喜欢我就关注我吧，后面的文章内容会越来越精彩喔！

现代网页设计中，动画和过渡是提升用户体验的重要手段。通过使用 CSS，我们可以在不影响页面性能的前提下，实现平滑和吸引人的视觉效果。本文将介绍 CSS 动画和过渡的基础知识，并通过几个例子展示如何在你的网站中应用它们。

CSS 过渡（Transitions）

CSS 过渡允许你在 CSS 属性值之间创建平滑的动画效果。当一个元素的属性值改变时，过渡效果会在一定时间内平滑地过渡到新的属性值。

基本语法

transition: property duration timing-function delay;

property：指定要添加过渡效果的 CSS 属性。
duration：过渡效果的持续时间。
timing-function：定义速度曲线的函数。
delay：过渡效果的延迟时间。

例子 1：鼠标悬停放大图片

img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

这个例子中，当鼠标悬停在图片上时，图片会在0.3秒内放大到原来的1.2倍大小，过渡效果为ease-in-out。

CSS 动画（Animations）

CSS 动画提供了更强大的控制，允许你创建复杂的动画序列，通过定义关键帧（keyframes）来控制动画的中间状态。

基本语法

@keyframes animation-name {
  from {
    /* 初始状态 */
  }
  to {
    /* 结束状态 */
  }
}

或者使用百分比来定义多个关键帧：

@keyframes animation-name {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

例子 2：无限旋转图标

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spin {
  animation: spin 2s linear infinite;
}

这个例子创建了一个名为spin的动画，使得图标无限期地旋转。

实战例子

接下来，我们将通过几个实战例子来展示 CSS 动画和过渡的具体应用。

例子 3：按钮点击波纹效果

.button {
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s;
}

.button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.button:active:after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0.5s, height 0.5s, opacity 0s 0.5s;
}

在这个例子中，当按钮被点击时，会产生一个波纹效果，模拟水波纹扩散。

例子 4：淡入淡出切换效果

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fadeOut 1s ease-in-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

这个例子中定义了两个动画，一个用于元素的淡入，另一个用于元素的淡出。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation and Transition Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }

  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .logo {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 20px;
    animation: spin 3s linear infinite;
  }

  .scrolling-text {
    margin: 20px 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
  }

  .scrolling-text p {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    transform: translateX(100%);
    /* Apply animation to this element */
    animation: scroll-text 10s linear infinite;
  }

  @keyframes scroll-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  .interactive-card {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .interactive-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .color-block {
    width: 100px;
    height: 100px;
    background-color: #17a2b8;
    margin: 20px;
    border-radius: 50%;
    transition: background-color 0.5s ease, transform 0.5s ease;
  }

  .color-block:hover {
    background-color: #28a745;
    transform: rotate(180deg);
  }
</style>
</head>
<body>

<div class="logo">
  <i class="fas fa-sync-alt"></i> Animated Logo
</div>

<div class="scrolling-text">
  <p>This text scrolls infinitely. Pay attention to how it moves smoothly from right to left.</p>
</div>

<div class="interactive-card">
  <h3>Interactive Card</h3>
  <p>Hover over this card to see it move. It's a simple yet effective way to add interactivity to your design.</p>
</div>

<div class="color-block"></div>

</body>
</html>

.logo 类定义了一个徽标，它具有字体大小和颜色，并应用了一个名为 spin 的关键帧动画，使徽标无限旋转。
.scrolling-text 类定义了一个包含滚动文本的容器，设置了背景颜色、文字颜色和内边距。
.scrolling-text p 选择器定义了滚动文本的样式，包括动画 scroll-text，使文本从右向左无限滚动。
.interactive-card 类定义了一个交互式卡片，它具有背景颜色、阴影、内边距和圆角。当鼠标悬停时，它会向上移动并增加阴影，这是通过 transition 属性实现的。
.color-block 类定义了一个颜色块，设置了宽度、高度、背景颜色和圆角。当鼠标悬停时，它的背景颜色会改变，并且会旋转 180 度。
body 的背景被设置为一个线性渐变，包含四种颜色。通过 background-size 属性，我们扩大了背景尺寸，这样动画在运行时会有更多的空间进行颜色的过渡。
@keyframes gradientBG 关键帧动画被创建来改变背景的位置，从而在不同的颜色之间产生平滑过渡的效果。
该动画被设置为无限循环，并且每次循环持续 15 秒，通过 ease 时间函数来平滑过渡。

结语

CSS 动画和过渡是前端开发者的强大工具，它们可以在不牺牲性能的情况下为用户提供流畅、引人注目的界面交互。通过掌握这些技术，你可以创造出更加动态和生动的网页体验。记住，动画应该用来增强用户体验，而不是分散用户的注意力，适量而恰当地使用动画效果是关键。

在线咨询

上一篇：如何编写HTML提交按钮代码？
下一篇：在 CSS 中隐藏元素的 10 种方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何通过css样式设置动画，转换，过渡等界面效果

CSS 过渡（Transitions）

基本语法

例子 1：鼠标悬停放大图片

CSS 动画（Animations）

基本语法

例子 2：无限旋转图标

实战例子

例子 3：按钮点击波纹效果

例子 4：淡入淡出切换效果

示例

结语

您的项目需求