css3过渡和动画

最新推荐文章于 2024-06-13 08:39:52 发布
最新推荐文章于 2024-06-13 08:39:52 发布
阅读量157 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65426289/article/details/128399999
版权

2 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

2.1 它是如何工作的？

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

要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性

  • 指定效果的持续时间。

示例代码如下：

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}

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

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

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

div:hover {
width: 200px;
}

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

示例效果如下：

2.2 多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

示例代码如下：

div.transition {
width: 100px;
height: 100px;
color: white;
text-align: center;
transform: rotateZ(0deg);
background: red;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, transform 2s;
-o-transition: width 2s, height 2s, transform 2s;
}
div.transition:hover {
width: 300px;
height: 300px;
transform: rotateZ(45deg);
}

[解析]  当前实例中，添加了宽度，高度和转换效果。

示例效果如下：

2.3 速度曲线

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

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

  • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

  • linear - 规定从开始到结束具有相同速度的过渡效果

  • ease-in -规定缓慢开始的过渡效果

  • ease-out - 规定缓慢结束的过渡效果

  • ease-in-out - 规定开始和结束较慢的过渡效果

  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

div {
width: 200px;
height: 50px;
color: white;
text-align: center;
background: red;
transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
div:hover {
width: 300px;
}
.timing1 {
transition-timing-function: linear;
}
.timing2 {
transition-timing-function: ease;
}
.timing3 {
transition-timing-function: ease-in;
}
.timing4 {
transition-timing-function: ease-out;
}
.timing5 {
transition-timing-function: ease-in-out;
}

示例效果如下：

2.4 延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
 transition-delay: 1s;
}

示例效果如下：

2.5 简写属性

实例：

div {
 transition-property: width;
 transition-duration: 2s;
 transition-timing-function: linear;
 transition-delay: 2s;
}

以上样式可简写为：

div {
 transition: width 2s linear 2s;
}

3 动画

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

3.1 什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

3.2 @keyframes 规则

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

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

示例效果如下：

示例代码如下：

/* 动画代码 */
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
/* 应用动画的元素 */
.example1 {
animation-name: example1;
animation-duration: 4s;
}

[解析]  这个实例中，动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从“red”逐渐改为“yellow”。

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字“from”和“to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

示例代码如下：

/* 动画代码 */
@keyframes example2 {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
/* 应用动画的元素 */
.example2 {
animation-name: example2;
animation-duration: 4s;
}

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

实例代码如下：

/* 动画代码 */
@keyframes example3 {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
/* 应用动画的元素 */
.example3 {
animation-name: example3;
animation-duration: 4s;
}

3.3 延迟动画

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

示例1：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
}
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example1 {
animation-name: example1;
animation-duration: 4s;
animation-delay: 2s;
}

[解析]  这个实例中，在开始动画前有 2 秒的延迟。

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

示例2：

@keyframes example2 {
from {
background-color: red;
}

to {
background-color: yellow;
}
}
.example2 {
animation-name: example2;
animation-duration: 4s;
animation-delay: -2s;
}

[解析]  这个实例中，动画将开始播放，就好像它已经播放了 2 秒钟一样。

示例效果如下：

3.4 运行次数

animation-iteration-count 属性指定动画应运行的次数。

实例：

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

[解析]  这个实例中，在停止前动画将运行 3 次。

3.5 反向或交替运行动画

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

animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值

  • reverse - 动画以反方向播放（向后）

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

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

实例：

div {
 width: 100px;
 height: 100px;
 position: relative;
 background-color: red;
 animation-name: example;
 animation-duration: 4s;
 animation-direction: reverse;
}

[解析]  这个实例中，将以相反的方向（向后）运行动画。

3.6 速度曲线

animation-timing-function 属性规定动画的速度曲线。

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

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

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

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

  • ease-out - 规定慢速结束的动画

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

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

下面这些例子展示了可以使用的一些不同速度曲线：

div {
width: 200px;
height: 50px;
color: white;
text-align: center;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example1 {
animation-timing-function: linear;
}
.example2 {
animation-timing-function: ease;
}
.example3 {
animation-timing-function: ease-in;
}
.example4 {
animation-timing-function: ease-out;
}
.example5 {
animation-timing-function: ease-in-out;
}

示例效果如下：

3.7 填充模式

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

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

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

  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

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

实例：

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}

[解析]  这个实例中，<div> 元素在动画结束时保留来自最后一个关键帧的样式值。

3.8 简写属性

实例：

div {
 animation-name: example;
 animation-duration: 4s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

以上样式可以简写为：

div {
 animation: example 4s linear 2s infinite alternate;
}

4 章节总结

  • 过渡

  • 动画

被子z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3（过渡和动画）
m0_68359121的博客
05-05 775
html和css的基础知识内容就正式结束啦！下面是css3内容篇记得上次发过接着更新 过渡与动画概念理解 css3过渡 化用菜鸟教程的说法，CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.指定要添加效果的CSS属性。2.指定效果的持续时间。 css3动画 化用菜鸟教程的说法，CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器：1.规定动画的名称。2.规定动画的
css3动画过渡实现鼠标跟随导航效果
09-27
主要介绍了css3动画过渡实现鼠标跟随导航效果的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3过渡和动画
Vin1992的博客
03-28 752
随想：为什么要写博客，原因之一：写博客也是大脑缓存的一种方式。可以把写博客看做是将知识碎片整理并写入一个“缓存文件”，当每次需要使用这个知识点的时候，直接回头看博客，而不用转动大脑搜索知识碎片，而且大多是不完整的，碎片化的，无法系统的连接起来，博客也一定程度上起到了缓解CPU（大脑）的运行压力。有意思正题： CSS3 过渡和动画，区别这两个概念，有助于记忆其属性。 过渡：一点到另一点；没有完成时间
17-CSS3过渡属性和动画属性
保持好奇
10-12 922
CSS3过渡属性、动画属性；transition,animation
CSS3过渡动画
DGL_CSDN的博客
08-31 4251
1 过渡 1.1 基本形式 transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。 之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。 过渡：从开始状态到结束状态的中间过程可以查看 格式： transition:过渡的属性 完成时间(s) 运动曲线 延迟时间 transition:all 3s(1s=1000ms) linear 0s;
CSS3中过渡（transition）和动画（animation）的区别
qq_43394976的博客
10-30 726
过渡和动画都可以实现元素属性随时间的变化而变化，但是两者区别主要有以下两点： 1、transition过渡需要配合伪类来使用，需要触发，但是动画（animation）在页面加载后就可以实现 2、过渡只有开始和结束两种状态，而动画可以设置中间状态，通过百分比来划分帧，实现复杂的动画。 ...
css 动画 过渡
qq_42389674的博客
08-14 598
css 过渡
【前端特效篇】CSS3 过渡与动画
前端知识分享喵
06-21 1303
变形是相对于自己本身原来的位置进行转换，原来的位置还占位，只是视觉上的变化。动画可以看作是自动执行的效果变化。变形和动画可以增加用户体验。
CSS之过渡和动画
学如逆水行舟，不进则退！
04-30 1456
CSS之过渡和动画
CSS过渡动画
热门推荐
weixin_70815247的博客
07-21 1万+
transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前元素->元素hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡从开始状态到结束状态的中间过程可以查看格式transition过渡的属性完成时间(s)运动曲线延迟时间transitiontransition包含以下四个属性transition-property过渡属性。...
css中的过渡和动画
TKOP_的博客
12-22 693
过渡和动画是css3新增的重要内容，对他们进行一次总结复习。
CSS3分享图标按钮过渡动画特效
07-28
CSS3分享图标按钮过渡动画特效是一款社会分享图标动画特效，鼠标移上去会有一个胶囊闪动的效果。
浅谈CSS过渡、动画和变换
09-24
下面小编就为大家带来一篇浅谈CSS过渡、动画和变换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
jQuery+CSS3过渡动画模态窗口特效特效代码
03-20
jQuery+CSS3过渡动画模态窗口特效是一款基于Codrops的ModalWindowEffects来制作，通过jQuery插件的方式来统一管理各种打开模态窗口的效果。
用css3实现转换过渡和动画效果
12-10
所以工程师几乎无需过多的考虑动画带来的性能问题，但在移动设备上可大有不同，移动设备分配给内置浏览器的内存可没有PC版本的浏览器内存可观，目前对CSS3支持最好的莫过于webkit浏览器了，在webkit内核的浏览器，一...
css3中有哪些新属性（特性）？
最新发布
tianxianghuiwei的博客
06-13 337
这些新属性和特性使得开发者能够更加灵活和精确地控制页面的外观和行为，提升用户体验和视觉吸引力。及其相关属性，实现灵活的布局方式，使得元素在容器中可以自动调整大小和位置。属性，实现在状态改变时，元素样式平滑过渡的效果，如颜色、大小、位置等。属性，为元素添加阴影效果，可以设置阴影的颜色、大小、模糊度和偏移量。属性，实现元素的旋转、缩放、倾斜和移动，而无需改变文档布局。属性，实现更复杂的动画效果，可以控制元素的逐帧动画行为。函数，实现背景色的渐变效果，可以创建平滑过渡的色彩效果。
css3新增的伪类有哪些
ggq53219的博客
06-12 378
CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。请注意，某些伪类（如。
vue在hash路由模式下实现点击定位滑动
IT_moshang的博客
06-12 346
hash路由模式下实现点击滑动
(css)el-tabs滚动按钮浮动问题
nyf_unknow的博客
06-11 247
思路：找到相应元素，降低层级。
CSS3 过渡动画属性
08-25
CSS3 transition 动画属性是一种用于实现网页元素平滑过渡效果的技术。它可以让网页元素在不同状态之间产生渐变效果，比如改变颜色、大小、位置等属性时，可以通过设置过渡时间、过渡方式等属性来实现动画效果。常用的过渡属性包括 transition-property、transition-duration、transition-timing-function、transition-delay 等。这些属性可以通过 CSS 样式表来设置，使得网页元素的动画效果更加生动、流畅。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值