CSS3常用动画效果合集（最全），看看这篇文章吧

最新推荐文章于 2024-05-23 22:54:35 发布
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量401 收藏 10
点赞数 5
分类专栏： 2024年程序员学习 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58397045/article/details/137205910
版权

/* 淡入-从上 */

@-webkit-keyframes fadeinT{

0%{opacity:0;-webkit-transform:translateY(-100px);}

100%{opacity:1;-webkit-transform:translateY(0);}

}

@-moz-keyframes fadeinT{

0%{opacity:0;-moz-transform:translateY(-100px);}

100%{opacity:1;-moz-transform:translateY(0);}

}

@-ms-keyframes fadeinT{

0%{opacity:0;-ms-transform:translateY(-100px);}

100%{opacity:1;-ms-transform:translateY(0);}

}

@keyframes fadeinT{

0%{opacity:0;transform:translateY(-100px);}

100%{opacity:1;transform:translateY(0);}

}

/* 淡入-从右 */

@-webkit-keyframes fadeinR{

0%{opacity:0;-webkit-transform:translateX(100px);}

100%{opacity:1;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinR{

0%{opacity:0;-moz-transform:translateX(100px);}

100%{opacity:1;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinR{

0%{opacity:0;-ms-transform:translateX(100px);}

100%{opacity:1;-ms-transform:translateX(0);}

}

@keyframes fadeinR{

0%{opacity:0;transform:translateX(100px);}

100%{opacity:1;transform:translateX(0);}

}

/* 淡入-从下 */

@-webkit-keyframes fadeinB{

0%{opacity:0;-webkit-transform:translateY(100px);}

100%{opacity:1;-webkit-transform:translateY(0);}

}

@-moz-keyframes fadeinB{

0%{opacity:0;-moz-transform:translateY(100px);}

100%{opacity:1;-moz-transform:translateY(0);}

}

@-ms-keyframes fadeinB{

0%{opacity:0;-ms-transform:translateY(100px);}

100%{opacity:1;-ms-transform:translateY(0);}

}

@keyframes fadeinB{

0%{opacity:0;transform:translateY(100px);}

100%{opacity:1;transform:translateY(0);}

}

/* 淡入-从左 */

@-webkit-keyframes fadeinL{

0%{opacity:0;-webkit-transform:translateX(-100px);}

100%{opacity:1;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinL{

0%{opacity:0;-moz-transform:translateX(-100px);}

100%{opacity:1;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinL{

0%{opacity:0;-ms-transform:translateX(-100px);}

100%{opacity:1;-ms-transform:translateX(0);}

}

@keyframes fadeinL{

0%{opacity:0;transform:translateX(-100px);}

100%{opacity:1;transform:translateX(0);}

}

/* 淡出 */

@-webkit-keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

@-moz-keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

@-ms-keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

@keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

/* 淡出-向上 */

@-webkit-keyframes fadeoutT{

0%{opacity:1;-webkit-transform:translateY(0);}

100%{opacity:0;-webkit-transform:translateY(-100px);}

}

@-moz-keyframes fadeoutT{

0%{opacity:1;-moz-transform:translateY(0);}

100%{opacity:0;-moz-transform:translateY(-100px);}

}

@-ms-keyframes fadeoutT{

0%{opacity:1;-ms-transform:translateY(0);}

100%{opacity:0;-ms-transform:translateY(-100px);}

}

@keyframes fadeoutT{

0%{opacity:1;transform:translateY(0);}

100%{opacity:0;transform:translateY(-100px);}

}

/* 淡出-向右 */

@-webkit-keyframes fadeoutR{

0%{opacity:1;-webkit-transform:translateX(0);}

100%{opacity:0;-webkit-transform:translateX(100px);}

}

@-moz-keyframes fadeoutR{

0%{opacity:1;-moz-transform:translateX(0);}

100%{opacity:0;-moz-transform:translateX(100px);}

}

@-ms-keyframes fadeoutR{

0%{opacity:1;-ms-transform:translateX(0);}

100%{opacity:0;-ms-transform:translateX(100px);}

}

@keyframes fadeoutR{

0%{opacity:1;transform:translateX(0);}

100%{opacity:0;transform:translateX(100px);}

}

/* 淡出-向下 */

@-webkit-keyframes fadeoutB{<

最低0.47元/天 解锁文章
面试题开源
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS3实现一个3D相册效果实例
12-30
本文再来利用CSS3属性来编写一个实例，话不多说，先直接看看效果。 因为前面已经讲解过一些属性的用法，此篇文章不再赘述，只记录这个实例的编码过程。项目代码最最后。 布局 直接看html布局： ...
【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-08 1017
一、CSS3 动画简介 二、CSS3 动画实现步骤 三、动画定义 四、代码示例
css 动画集合（亲测可用，完善中...）
青衫折扇的博客
10-08 293
/*弹层动画（从上往下）*/ .fadeIn { -webkit-animation: fadeInDown .3s; animation: fadeInDown .3s; } @keyframes fadeInDown { 0% { -webkit-transform: translate3d(0, -20%, 0); -webkit-transform: translate3d(0, -20%, 0); transform: .
CSS动画技术（css-animation）
最新发布
Zarathusa的博客
05-23 1263
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
css动画详解
m0_56713342的博客
10-30 1万+
1、使⽤css技术来控制⻚⾯元素css属性的变化。2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）二、过渡1.过渡的理解过渡（transition）[træn'siʒǝn]-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡-需要在某种条件下触发，例如hover、active、focus情况下-⼀次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值。
深入浅出 CSS 动画
热门推荐
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
CSS系列之动画
老__L的博客
02-27 6677
本文主要介绍CSS的animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes属性。 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
CSS3实现动画效果
AXDRXS的博客
12-17 1万+
CSS3实现动画效果
css之动画使用 （详解）
jw_xiaoming的博客
11-26 1648
动画使用案例
6种精美的纯CSS3丝带效果
12-13
本篇文章将深入探讨如何利用CSS3的特性，如伪元素、transform、过渡效果和颜色渐变等，来创建六种不同的精美丝带效果。 1. **伪元素的应用** CSS3中的`:before`和`:after`伪元素是构建丝带效果的关键。这两个伪...
CSS3荧光灯文字闪烁动画特效
12-13
本篇文章将深入探讨如何使用CSS3创建一款荧光灯文字闪烁动画特效。 首先，我们要理解这个特效的基本原理。它主要依赖于两个核心概念：`text-shadow` 属性和 `animation`。`text-shadow` 用于创建文字的阴影效果，...
html+css 动画效果
04-11
这段代码会在0.5秒内平滑地从红色渐变到蓝色，`ease`值表示变化速度的缓动函数，使得动画看起来更自然。 接下来是旋转和翻转动画。CSS3引入了`transform`属性，它允许我们对元素进行2D和3D变换。旋转元素可以使用`...
jQuery+CSS3炫酷手风琴特效
04-06
本篇文章将深入探讨如何利用jQuery和CSS3技术实现一款蓝色大气风格、带有梦幻气泡效果的滑动切换手风琴特效。 首先，我们来理解什么是“手风琴”特效。手风琴特效是指在有限的空间内，通过展开和折叠的方式，展示或...
CSS动画
LiHang1234567777的博客
07-21 4708
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
CSS教程--动画
小马哥的博客
02-25 2300
CSS
CSS3动画
xy_is_fhh的博客
11-25 5532
动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 1.动画的基本使用 制作动画分为两步： 1.先定义动画 2.再使用(调用)动画 1.用keyframes定义动画(类似定义类选择器) 2.元素使用动画 ...
CSS3动画学习笔记
dasiy_j的博客
05-13 803
主要学习内容如下：1.2D 转换2.3D 转换3.过渡4.动画2D 转换：transformCSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置旋转：rotaterotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。如rotate值（30deg）就是元素顺时针旋转30度。小例子：扑克牌（主要参考css3动画）&...
【css】css动画实现的3种方式
t13965688123的博客
05-25 1万+
css实现动画主要有3种方式，①、transition实现过渡动画，②、transform转变动画，③、animation实现自定义动画。
css3 动画的实现
青蛙king的博客
12-15 2496
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
css3旋转动画效果
05-31
可以使用CSS3中的transform属性和@keyframes规则来创建旋转动画效果。例如，以下代码将一个div元素旋转360度： ``` div { width: 100px; height: 100px; background-color: red; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` 这段代码中，我们定义了一个名为rotate的动画，它从0度旋转到360度，持续时间为2秒，线性变化，并且无限循环播放。我们将这个动画应用于一个div元素，使其旋转起来。你可以根据自己的需求修改动画的属性值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值