比css3动画更实用，且能兼容到IE10的动画属性

已于 2023-10-19 17:24:42 修改
阅读量120 收藏
点赞数
文章标签： css3 前端 css
于 2021-08-03 10:28:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/119344458
版权

随着css3的出现 动画走进了前端开发的概念 但其实css3的动画并不是很使用或者说完美
第一个 css3的弊病 不兼容IE低版本
老实说 我今天要介绍的属性也只能兼容到IE10 但已经比css3好很多了
另外 我这个可以保留动画的最终结果

transition: height 0.4s ease;

当给元素这样设置时 用js去改变这个元素的高度时 你会发现期秒的动画效果
举一反三 transition: width 0.4s ease; 等等都是可以的
这个动画的实用度个人觉得是比css动画好的

瑞晟技术服务中心-耿瑞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3过渡效果 兼容IE6、IE7、IE8
盒子豪的博客
12-19 2072
.box{ width:120px;height:40px;background:yellowgreen;line-height:40px;transition:width 1s;cursor:pointer; } .box:hover{ width:180px; } div class="box">Hello Worlddiv>
Css3动画浏览器兼容问题
qq_39936163的博客
03-26 7655
Css3动画属性浏览器兼容的写法 在css发展的过程中，当一些新得css属性刚出来的时候，还没有成为业界认可的标准（有可能永远都不会成为标准），于是各个浏览器开发者选择采用一些用于自己测试的属性，这些属性只在自己所开发的浏览器上被支持，而在其他浏览器上不支持。于是这些属性前面都加上了独特的前缀。 常见的谷歌浏览器和Safari浏览器的前缀为 -webkit- 火狐浏览器（Firefox）的前缀为 ...
animate.css 兼容ie,关于css3的动画效果animate的使用说明及浏览器兼容的介绍
weixin_39624873的博客
08-04 556
这篇文章主要介绍了关于css3的动画效果animate的使用说明及浏览器兼容的介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下昨天突然看到jing.fm(这个音乐网站非常不错，很多效果我都很喜欢，如果你有兴趣，可以去围观下)上音乐播放时，专辑的转动效果很不错，所以准备自己动手写下，以备后用。结果第一次使用animate就遇到了坑爹的事情，特吐槽下好久没更新blog，上次发文(11...
动画效果(兼容各个浏览器)
dianchamian8747的博客
06-11 502
.destination1 .current{ display:block; animation:danru 2s linear infinite; -webkit-animation:danru 2s linear alternate ; -moz-animation:danru 2s linear alte...
带有css3动画效果的兼容多浏览器简单导航条示例
09-25
示例中特别提到了兼容IE6-10、Firefox、Chrome、Opera和Safari等主流浏览器。为了实现这一目标，通常需要使用特性检测或前缀来确保在不支持CSS3特性的浏览器中也能正常工作。例如，使用了Webkit、Mozilla和无前缀的...
CSS3中Transform动画属性用法详解
12-10
css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是...
纯css实现的动感导航栏源码，动画效果不兼容IE浏览器
05-18
在提供的"纯css动感导航栏，动画效果不兼容IE浏览器"源码中，我们可以看到开发者已经实现了上述的一些CSS3特性，但未针对IE浏览器做优化。阅读`readme.md`文件将提供更详细的代码实现和使用说明，帮助开发者理解如何...
CSS3边框动画
09-13
虽然CSS3边框动画已被大多数现代浏览器支持，但老版本的IE可能不支持。确保在使用时添加适当的前缀（如`-webkit-`、`-moz-`、`-ms-`），并考虑提供回退方案以确保广泛兼容性。 总结，CSS3边框动画提供了无尽的可能...
需要知道的CSS3动画技术
09-25
虽然CSS3动画在现代浏览器中得到了广泛支持，但IE8及更低版本需要使用特定的滤镜或前缀来实现兼容。例如，使用 `-webkit-` 和 `-moz-` 前缀支持Webkit（Safari和Chrome）和Gecko（Firefox）浏览器，对于Internet ...
IE10 下CSS3选择器及动画(animation)效果实例教程
热门推荐
liwei3gjob的专栏
05-10 1万+
各位朋友大家好,今天笔者继续为大家分享IE10 下CSS3样式表系列教程,继上文：详解IE10 下CSS3 3D变换(3D transfrom)及实例教程  (http://blog.csdn.net/liwei3gjob/article/details/8865874)，CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度
css3中动画兼容版
zyzn1425077119的博客
04-14 3659
.mymove{     display:block;     postion:relative;     -webkit-animation-name: mymove;     animation-name: topappcur;     -webkit-animation-duration: .5s;     animation-duration: .5s;     -web
ie10 css3 transition 过渡
weixin_30730053的博客
01-31 145
ie10的过渡跟webkit内核的过渡没太大的区别，只是不用加前缀了。 transition就是过渡，意思是指变化的效果通过一个过渡来实现，比如位置的改变： 开始位置的left值是0，当我点击按钮的时候就更该为200px; demo展示地址：http://www.ibokanfamily.com/win8/transition/position6.html 理论上来说所有的样式都可以...
如何用CSS3画一条0.5px的直线？
最新发布
唐家小妹的博客
07-05 187
来将元素在垂直方向上缩放为原来的一半高度，从而实现看起来像是0.5像素宽的线条。在 CSS 中，实际上无法直接指定 0.5px 的线条粗细，因为 CSS 中的像素单位是最小单位，通常无法表示小数像素。但是，可以通过一些技巧来模拟出看起来像是 0.5px 粗细的线条，例如使用伪元素和缩放等技巧。除了使用伪元素来模拟0.5像素线条之外，还有一种常见的方法是使用 CSS 的 transform 属性来实现。需要注意的是，这种方法是一种近似实现，实际上并没有真正的 0.5px 粗细，而是通过视觉上的伪装来实现。
【CSS】如何实现分栏布局
读心悦
07-02 447
在CSS分栏布局中，设置宽度和样式是一个基本且重要的步骤。这可以通过直接应用样式到列元素（通常是div元素）上来实现。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1027
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 514
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
css3动画-animation各个属性详解
06-28
回答2：</h3><br/>CSS3动画是网页开发中非常常用的一种技术，通过使用动画属性可以给页面的元素增添动态的效果。本文将详细介绍CSS3动画的各个属性。 1. animation-name 该属性定义要绑定到要执行动画的@keyframes...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值