css3 transform transition相关问题
问题描述
<style> .a{-webkit-transition: 1s 0s all ease;-o-transition: 1s 0s all ease;-moz-transition: 1s 0s all ease;transition: 1s 0s all ease;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); }</style><p style='height: 300px;width: 300px;background: red'></p>
就这样 为什么页面显示出来直接放大了1.1倍 1秒的过滤怎么就没有？
问题解答
回答1：既然是过渡，就应该有一个状态的变化，题主这样设置就是让.a的初始状态就为1.1倍。如果你给.a:hover设置样式就可以看到效果了：
.a { -webkit-transition: 1s 0s all ease; -o-transition: 1s 0s all ease; -moz-transition: 1s 0s all ease; transition: 1s 0s all ease;}.a:hover { -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
题主如果是想要一加载就开始动画的话，应该使用animation来实现。
回答2：我猜题主想要的可能是这种效果?不过这个应该算动画不算过渡吧www
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' ''> <html xmlns=''> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312' /> <style> @keyframes myfirst{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-moz-keyframes myfirst /* Firefox */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-webkit-keyframes myfirst /* Safari 和 Chrome */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-o-keyframes myfirst /* Opera */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } .a{ width: 300px; height: 300px; background: red; -webkit-animation: myfirst 1s; -o-animation: myfirst 1s; -moz-animation: myfirst 1s; animation: myfirst 1s; } </style> </head> <body> <p class='a'></p></body> </html> 回答3：
W3C标准中对css3的transition这是样描述的： “css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”所以并不是什么时候都能看到动画效果的，在页面刚加载 解析css 渲染页面的时候 并没有触发过渡效果。如果想实现页面刚加载就出发 transition 的效果的话，可以考虑 用一下 调用一次 animation；或者 用js 获取页面加载状态；
仅供参考...
相关文章：
1. 为什么span的color非要内联样式才起作用？2. javascript - swiper.js嵌套了swiper 初始设置不能向下一个滑动 结束后重新初始3. python - Django ManyToManyField 字段数据在 admin后台 显示不正确，这是怎么回事？4. angular.js - angular-ui-bootstrap 报错无法使用？5. python - 如何修改twisted自带的日志输出格式?6. docker - 如何修改运行中容器的配置7. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？8. 请问一下各位老鸟 我一直在学习独孤九贱 现在是在tp5 今天发现 这个系列视频没有实战9. 在cmd下进入mysql数据库，可以输入中文，但是查看表信息，不显示中文，是怎么回事，怎新手，请老师10. 如何使用git对word文档进行版本控制？
网公网安备