CSS3动画的常见属性（CSS3）

最新推荐文章于 2023-03-24 22:21:47 发布
最新推荐文章于 2023-03-24 22:21:47 发布
阅读量332 收藏
点赞数
分类专栏： 前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50569789/article/details/119710587
版权

CSS3动画的常见属性（CSS3）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画的常见属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 动画名称 */
            /*   animation-name: move; */

            /* 持续时间 */
            /*  animation-duration: 2s; */

            /* 运动曲线 */
            /*  animation-timing-function: ease; */

            /* 何时开始 */
            /*  animation-delay: 0.5s; */

            /* 重复次数 iteration 重复的    count 次数    infinite 无限 */
            /*   animation-iteration-count: infinite; */

            /*    是否反方向播放   默认的是 normal  如果想要反方向 则 alternate*/
            /*   animation-direction: alternate; */

            /* 动画结束后的状态 默认的是backwa回到起始状态 我们可以让它停留在结束状态forwards */
            /* animation-fill-mode: forwards; */

            /*  animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s linear 0s infinite alternate forwards;
            /*  linear是匀速的意思 */
        }

        div:hover {
            /*  鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
不易撞的网名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2021-05-08
Y20030303003的博客
05-08 79
CSS3的动画属性 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： DW 作者：夜袭寡妇村 撰写时间：2021/5/8 CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。 上面代码表示，当鼠标悬停在div元素上时，会产生名为move的动画效果，持续时间为1秒。为此，我们还需要用keyfr...
CSS3动画属性
LMX的博客
09-13 251
CSS3动画 设置CSS3动画的一般流程 设置关键帧 将关键帧绑定到元素上 设置动画的播放时间 关键帧动画设置 使用@keyframes [名称] 的形式来定义关键帧。 使用form……to……来设置（动画时间开始到结束的样式） 使用百分比来规定整个播放时间中各个百分比时的样式 示例： @keyframes example{/*第一种方式*/ form {font-size:50px} to{font-size:30px} } @keyframes example{ 10%{
css3动画属性
ssjjrr的博客
10-01 816
css3动画属性
《CSS3》动画属性
weixin_47181056的博客
06-28 692
每天收获一点点
css3常用动画属性总结
weixin_45781661的博客
02-25 554
css3常用动画属性总结 1、text-stroke（仅支持Safari、Chrome） -webkit-text-stroke: 1px pink; 第一个参数是描边的宽度，第二个参数是描边的颜色;通常使用这个属性，会和color:transparent;搭配使用，实现镂空字体的效果，如下示例所示 font-size: 40px; -webkit-text-stroke: 1px pink; color:transparent; 2、border-radius border-radius
巧用CSS3制作时尚的网页加载动画效果
01-08
在我们深入CSS3，创建预加载动画集之前，我们先讨论一些CSS3中非常重要的属性。 伪元素（Pseudo Elements）:before :after 伪元素在用CSS3创建预加载动画的过程中是非常有用的。伪元素在本质上是在HTML元素之前或...
JavaScript判断浏览器对CSS3属性是否支持的多种方法
10-21
其实在使用css3的一些属性时，为了兼顾低端浏览器对CSS3的不友好性，往往需要知道某些浏览器是否支持要...比如常见的CSS3动画就很有必要检测浏览器是否支持。下面本文就分享了几种方法，有需要的朋友们可以参考借鉴。
HTML5和CSS3详细总结
04-26
涉及了H5新增的一些接口API，如网络监听接口、全屏接口、拖拽接口等，H5新增语义标签，flex伸缩布局等内容，总结了H5常见常用的大部分知识。
【前端素材】模板-实用js和css动画素材.zip
最新发布
04-04
CSS 动画：使用 CSS 属性（如@keyframes、transition、transform等）来实现动画效果。这种方式简单易用，适合实现简单的动画效果，如过渡、旋转、缩放等。 JavaScript 动画：通过 JavaScript 操作 DOM 元素的样式...
【前端素材】模板-多种实用优质的工具类css动画素材.zip
04-04
CSS 动画：使用 CSS 属性（如@keyframes、transition、transform等）来实现动画效果。这种方式简单易用，适合实现简单的动画效果，如过渡、旋转、缩放等。 JavaScript 动画：通过 JavaScript 操作 DOM 元素的样式...
CSS3之动画属性
许小墨的菜鸡博客
03-24 493
CSS3新增之动画属性
css3 动画属性
吴小花的博客
03-06 602
1.css3动画属性 2.@keyframes规则 @keyframesanimationname{keyframes-selector{css-styles;}} 3.animation（动画）属性 animation: name duration timing-function delay iteration-count direction fill-mode pl...
CSS3-animation动画属性
weixin_44833875的博客
04-09 475
animation 动画 @keyframes 关键帧动画 先用@keyframes预先定义好元素在整个过程中要经历的状态，然后再通过animation调用动画。 动画状态 from 动画开始 to 动画结束 也可以用百分比%表示，例如0%、50% 、75%、100%，实际开发中用%较多。 代码演示： animaition 常用属性 animaition 常用属性 属性值 an...
css3的动画属性有哪些？
sqrsdwq的博客
02-29 426
css3动画属性与过渡属性有所不同，他不需要事件触发，调用关键帧即可。 制作动画时我们需要先制定关键帧 @keyframes 关键帧的名称{ from{ 开始状态 } to{ 结束状态 } } 比较繁琐的动画可采用如下方法指定关键帧： @keyframes 关键帧的名称{ 0%{ 开始状态 } 25%{ 过程状态 } 50%{ 过程状态 } 75%...
CSS3中的动画属性具体有哪些呢
lemon_yi的博客
03-01 1187
CSS3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3中的动画属性 1）关键帧的制定 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 因而关键帧可以使得动画在不需要事件...
CSS3中的动画属性详解
ZhuangWei的博客
04-04 1014
开篇一张图，内容全靠编！！！ 是的，这次我们讲的就是做个简单的css3小动画 那么css3动画是怎么完成的呢？ css3里面动画我们可以分成2D动画和3D动画。首先，我们需要了解一下css3动画都有些什么属性。 2D动画的属性： 变形属性transform： 位移—translate()、缩放—scale()、旋转—rotate()、倾斜—skew()。 transform:translate(...
浅谈css3动画属性
charlize_wen的博客
02-29 449
css3动画通过animation来实现，css3动画不需要事件的触发，只需要调用关键帧即可。因此，制定好关键帧是实现动画的关键步骤。 制定关键帧 方法一：from内一般写入动画的初始状态，to写入动画的结束状态。 @keyframes 关键帧名字{ from{ } to{ } } 方法二：百分比形式表示动画的状态，0%表示动画初始状态，100%表示动画结束状态。 @keyframes 关键帧名字...
css3的动画属性总结
qq_43569680的博客
04-07 348
CSS3的动画属性
weixin_44222157的博客
04-08 106
动画属性：animation； 在元素的移动中，我们除了常用的利用hover配合过渡trasition，定位和位移外，我们还会用到动画属性animation; CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 首先，动画的实现的通过对关键帧的调用来实现的。 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，...
css3动画效果大全代码
07-14
### 回答1： CSS3动画效果是利用CSS3的动画属性来实现各种各样的动画效果。下面是一些常见的CSS3动画效果及其代码示例： 1. 平移动画效果： ```css @keyframes move { 0% {transform: translateX(0px);} 100% {transform: translateX(200px);} } .element { animation: move 2s infinite; } ``` 2. 缩放动画效果： ```css @keyframes scale { 0% {transform: scale(1);} 50% {transform: scale(1.5);} 100% {transform: scale(1);} } .element { animation: scale 2s infinite; } ``` 3. 旋转动画效果： ```css @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } .element { animation: rotate 2s infinite; } ``` 4. 淡入淡出动画效果： ```css @keyframes fade { 0% {opacity: 0;} 100% {opacity: 1;} } .element { animation: fade 2s infinite; } ``` 5. 弹跳动画效果： ```css @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } .element { animation: bounce 2s infinite; } ``` 除了以上的效果之外，还有很多其他的CSS3动画效果，比如闪烁、摇摆、颤动等等。你可以根据具体需求来选择相应的属性和关键帧，通过合理的组合来实现自定义的动画效果。要注意兼容性，一些较老的浏览器可能不支持某些CSS3属性。 ### 回答2： CSS3动画效果大全代码十分丰富，以下是一些常见的动画效果及其相应代码示例： 1. 渐变动画： ``` @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .element { animation: fade-in 1s; } ``` 2. 缩放动画： ``` @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } } .element { animation: scale 1s; } ``` 3. 旋转动画： ``` @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .element { animation: rotate 2s infinite linear; } ``` 4. 移动动画： ``` @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 100px); } } .element { animation: move 2s infinite alternate; } ``` 5. 弹跳动画： ``` @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .element { animation: bounce 1s infinite; } ``` 以上仅是一部分常见的CSS3动画效果代码示例，还有很多其他效果可以在不同场景中使用。CSS3的动画功能可以让网页更加生动有趣，提升用户体验。 ### 回答3： CSS3动画效果是在网页设计中经常使用的一种技术，可以通过CSS样式来控制元素的动态变化，从而增加网页的交互性和视觉效果。下面是一些常见的CSS3动画效果代码： 1. 渐变动画效果： ``` div { width: 100px; height: 100px; background: linear-gradient(to right, red, blue); animation: gradient 3s infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } ``` 2. 旋转动画效果： ``` div { width: 100px; height: 100px; background: red; animation: rotate 3s infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 3. 缩放动画效果： ``` div { width: 100px; height: 100px; background: red; animation: scale 3s infinite; } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } ``` 4. 移动动画效果： ``` div { width: 100px; height: 100px; background: red; animation: move 3s infinite; } @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } } ``` 5. 弹跳动画效果： ``` div { width: 100px; height: 100px; background: red; animation: bounce 1s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } ``` 这些只是一部分常见的CSS3动画效果代码，还有更多的动画效果可以通过不同的CSS属性和关键帧来实现。通过合理地运用这些代码，可以为网页增加丰富的动态效果，使用户体验更加生动和有趣。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不易撞的网名

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值