CSS3提供的Transition动画

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

transition-property:指定对HTML元素的哪个CSS属性进行平滑渐变处理。
transition-duration:指定属性平滑渐变的持续时间。
transition-timing-function:指定渐变的速度:
ease:动画开始时较慢，然后速度加快，到达最大速度后在减速。
linear:线性速度。
ease-in:动画开始时速度较慢，然后速度加快。
ease-out:动画开始时速度很快，然后速度减慢。
ease-in-out:动画开始时速度很慢，然后速度加快，到达最大速度后再减慢速度。
cubic-bezier(x1,y1,x2,y2):通过贝济埃曲线来控制动画的速度。
transition-delay:指定延迟时间。

鼠标移动到元素上时，背景颜色渐变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 400px;
            height: 50px;
            border: 1px solid black;
            background-color: brown;
            padding: 10px;
            transition: background-color 4s linear ;
        }
        div:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>煞风景卡是否</div>
</body>
</html>

每次按下鼠标时，即可看到图片慢慢的漂浮过来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img#target{
            position: absolute;
            transition: left 5s linear,top 5s linear;
        }
    </style>
</head>
<body>
    <img src="logo13.jpg" id="target">
    <script type="text/javascript">
        var target = document.getElementById("target");
        target.style.left  = "0px";
        target.style.top  = "0px";
        document.onmousedown = function(evt)
        {
            target.style.left  = evt.pageX+"px";
            target.style.top  = evt.pageY+"px";
        }
    </script>
</body>
</html>
WYG2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画效果-transition
weixin_49612239的博客
06-01 2866
1.transition的浏览器支持情况 IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了 2.还是一步一步说说怎么用transition吧 页面只有一个div，其css如下： <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5
css3 transform transition 动画效果
SSS01233210的博客
08-30 916
直接记住这几个transition的配置，就可以做出来漂亮的动画效果了 1.变形——旋转 rotate('旋转值’deg) ，rotate()函数只是旋转，而不会改变 元素的形状（旋转值为正顺时针旋转，旋转值为负逆时针旋转） transform: rotate(45deg); 2.变形——扭曲 skew() skew()函数不会旋转，而只会改变元素的形状。 skew(x,y)使元素在水平和垂直方向同时扭曲（X 轴和 Y 轴同时按一定的角度值进行扭 曲变形，单值为单方向扭曲，先水平后垂直，也可单独设sk
css中动画之transition
zai329979994639的博客
12-29 1339
css动画
CSS 之 过渡动画（transition）
weixin_45092437的博客
04-25 1641
transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。
CSS transition动画卡顿的探究
weixin_45689946的博客
12-27 6027
一、问题 今天在使用css3的transition做动画过渡时，发现动画会卡顿，特此记录我发现卡顿的一些原因和笔记。 先给出结论： 在使用css3 transtion做动画效果时，transform实现的动画是与合成器线程相关的，不需要等待主线程样式计算或者 JS 执行，计算速度是很快的；而使用height，width，margin和padding做动画过渡时，会导致浏览器发生布局和绘制的调整，主线程需要重新计算样式并且执行JS，计算速度自然就慢了。 二、以height为过渡属性时 当一个元素的过渡属性为
css3 transition 动画
qq_39430589的博客
09-25 884
10 CSS3过渡 特点： 1）本质上是一帧动画，一帧结束后，就没有了 2）过渡的效果的实现，必须通过用户的行为，可能触发，行为：hover， focus，click，JS代码 1、transition的属性 transition-property:指定元素的过渡属性 transition-duration：规定了过渡时间。 transition-timming-function：
css3过渡动画——transition属性
anqi124415的博客
10-08 483
1.linear 相同的速度从开始到结束，也就是匀速2.ease 默认值 慢速度开始--速度变快--慢速度结束3.ease-in 慢速度开始的过渡效果，也就是以低速度开始4.ease-out 慢速度结束的过渡效果，也就是以低速结束5.ease-in-out 以慢速度开始和结束的过渡效果。动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。/* 参与过渡的css属性名称 */css样式：参与过渡的css属性名称|all表示所有属性。/* 动画执行时间 *//* 速度类型 *//* 延迟时间 */
CSS动画 animation与transition
sanlyshi's front-end road
02-11 5014
　　 一、区分容易混淆的几个属性和值 　　先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 　　CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix； 　　transform(变形)是CSS3中的元素的属性，而translate只是transfo
CSS动画——transition详细讲解
m0_60893808的博客
06-07 2254
ease-in-out和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)ease渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)- 渐变函数是transition-timing-function其中贝塞尔曲线的预设值。ease-out匀速，减慢cubic-bezier(0,0,0.58,1)ease-in渐快，匀速cubic-bezier(0.42,0,1,1)linear全程匀速cubic-bezier(0,0,1,1)
CSS动画：transition触发动画和animation非触发动画
孙君的空间站
03-17 2300
通过CSS样式表现动画
CSS3中Transition动画属性用法详解
09-24
CSS3中的Transition动画属性是网页设计中用于创建平滑过渡效果的关键工具，它允许CSS属性值在一段时间内平滑地变化，而不是立即跳跃到新值。这个特性在响应用户交互时，如点击、悬停或者页面加载时，能提供更加流畅...
css3 transition按钮动画特效特效代码
03-20
css3 transition按钮动画特效是一款多种不同效果的鼠标按钮滑动切换动画特效。
css3 transition按钮动画特效
06-24
css3 transition按钮动画特效是一款多种不同效果的鼠标按钮滑动切换动画特效。
CSS3中的Transition过度与Animation动画属性使用要点
12-13
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下： CSS Code复制内容到剪贴板 transition: property duration timing-function delay; /...
HTML5 新元素
csbysj2020的博客
06-12 323
HTML5是最新版本的HTML，引入了许多新元素和功能，以更好地满足现代网页设计的需要。这些新元素不仅增强了网页的表现力，还提高了代码的可读性和可维护性。本文将详细介绍HTML5中的新元素，包括它们的功能和用法。
HTML5 Web 存储：简化数据存储的利器
艾恩小灰灰的博客
06-13 335
HTML5 Web存储为前端开发者提供了强大而灵活的数据存储方案，无论是需要长期保存的用户配置，还是仅限当前会话的临时数据，localStorage和sessionStorage都能轻松应对。掌握这些技术，无疑将使你的Web应用更加丰富、互动性更强。记得在实际应用中，合理选择存储方式，并注意数据的安全性和兼容性问题，以提供最佳的用户体验。
pyzmq-26.0.0b2-cp312-cp312-manylinux_2_28_x86_64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
C++冒泡排序（基础内容）
06-19
1.循环两个变量：外层（轮数）、内层每轮的次数； 2.总轮数=元素长度-1=最大下标 3.每轮次数=元素长度-1-轮数=最大下标-轮数； 4.轮数（++），次数（++）； 5.两两交换，大的放后面 冒泡排序基础内容，自学可用； 分为三个部分，推到过程，总结，题目样例 很详细，欢迎一起学习交流
pyzmq-25.1.0-cp36-cp36m-win32.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
css3 transition 动画属性
06-28
### 回答1： CSS3 transition 动画属性是一种用于实现网页元素平滑过渡效果的技术。它可以让网页元素在不同状态之间产生渐变效果，比如改变颜色、大小、位置等属性时，可以通过设置过渡时间、过渡方式等属性来实现动画效果。常用的过渡属性包括 transition-property、transition-duration、transition-timing-function、transition-delay 等。这些属性可以通过 CSS 样式表来设置，使得网页元素的动画效果更加生动、流畅。 ### 回答2： CSS3 transition（过渡）动画属性是一种方式，通过在 CSS 样式中使用过渡属性可以使元素从一种状态平滑地过渡到另一种状态，而不需要使用 JavaScript 或 Flash 等技术来完成。transition 属性主要用于控制元素的过渡效果，以提高页面的交互体验。 常用的属性包括 transition-property、transition-duration、transition-timing-function 和 transition-delay。 transition-property 用于指定要进行过渡效果的 CSS 属性，如 background-color、color 、opacity 等，可以单独指定一个属性，也可以用“all”指定所有属性。 transition-duration 定义过渡效果的持续时间，可以使用秒或毫秒单位，例如“1s”或“1000ms”。 transition-timing-function 控制动画速度曲线的属性，可以让过渡效果具有更好的体验感，例如 “linear”、 “ease-in”、 “ease-out” 等。 transition-delay 是指在开始过渡效果之前等待的时间，单位仍然是秒或毫秒。 此外，CSS3 还提供了一些其他的 transition 属性，例如 transition-property、transition-duration、transition-timing-function、transition-delay，让你更加灵活地控制动画效果，并使你的网站更加生动有趣。 总而言之，CSS3 transition 动画属性在页面设计中起着重要作用，它可以让页面元素之间的变化变得平滑，用户体验友好，更加符合现代网站设计的要求。 ### 回答3： CSS3 transition 动画属性是一种用于改变元素某些属性的平滑过渡效果的技术。它能够通过过渡的时间、过渡的延迟时间、过渡的速度曲线以及触发过渡的事件等属性，让网页元素的变化更加自然流畅。通过 CSS3 transition 动画属性，我们可以动态地改变网页元素的样式，从而达到更加生动的页面交互效果。 CSS3 transition 动画属性包括以下几个方面： 1. transition-duration：用于设置过渡效果的持续时间，单位是秒或毫秒。 2. transition-delay：用于设置过渡效果的延迟时间，单位是秒或毫秒。 3. transition-timing-function：用于设置过渡效果的速度曲线，有 linear, ease, ease-in, ease-out, ease-in-out 等几种选项。 4. transition-property：用于设置要过渡的属性，比如 background-color、opacity、width 等等。 5. transition：可以同时设置 duration、delay、timing-function 和 property 四个属性。 CSS3 transition 动画属性的应用场景非常广泛。比如，在网页设计中，我们可以使用它来实现按钮 hover 时的颜色渐变效果，或者是当网页滚动时，导航菜单透明度慢慢变化的效果，以增强用户使用网页的体验。除此之外，在移动端应用开发中，使用 CSS3 transition 动画属性还能让网页更加简洁、直观、美观，提高用户对移动应用的认知度和信任感。 总之，CSS3 transition 动画属性是一项非常实用而且易于操作的技术，它为网页设计师和开发者提供了更多创造性的思路，也为用户提供了更加优秀的体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值