transition transform

简介:
transition主要包含四个属性值:
执行变换的属性:transition-property,
变换延续的时间:transition-duration,
在延续时间段,变换的速率变化transition-timing-function,
变换延迟时间transition-delay
也可以酱紫哦: transition: background 0.5s ease-in,color 0.3s ease-out;

取值:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。


transition-suji.png

兼容写法:

-moz-、 -webkit-t、-ms-




      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1621950,如需转载请自行联系原作者




相关文章
|
Web App开发 前端开发 iOS开发
transform,transition,animation的混合使用——初探
学习css3动画 css3动画这个对于我们前端攻城狮来说是个既熟悉又陌生的东东,前两年有好些个大牛都在研究使用它,但最近一段热度降了下来,可以说这个东东各大钟情于大的公司都有自己的一套解决使用方案,但我在网上苦苦的寻找,没有发现,可能是我不够用心。
1187 0
|
前端开发 程序员
transform,transition,animation的混合使用——结业篇
css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。
1146 0
|
前端开发 JavaScript 开发者
transform,transition,animation的混合使用——高手
每个制作出来的css3动画都凝结了设计者和创作者智慧的结晶,以此,我们要向前辈致敬;动画的出现给单调的网页平添了活性,是单纯的展示页面变得不再那么枯燥,所以,作为一个web前端的开发者能够创作出属于自己的特有的动画,我感到很高兴。
1117 0
|
算法
Transition matrix
**Transition matrix** 中文名:转移矩阵;转换矩阵;跃迁矩阵;状态转移矩阵
2685 0
|
前端开发 JavaScript
CSS-Transform-transition-Animation
Transform   根据我的理解,transform和width、height、background一样,都是dom的属性,不同的是它是css3旗下的,比较屌,能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸,跟canvas上的某些api神似,这么说来transform好像能干些js才能干的事。
1062 0
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform
d3_transition
效果1 代码1 duration默认是500, delay(), 这里延迟1秒开始transition. 效果2 代码2 效果3 代码3 效果4 图免了, 自己试试就知道了. 代码4
925 0
|
5月前
|
前端开发
transition第一次不生效
解决CSS transition第一次不生效的问题,确保在动画属性变化前已经设置了初始值,如示例中需给`left`属性一个初始值以实现平滑过渡效果。
87 2
|
9月前
|
算法 数据可视化 计算机视觉
Transform
Transform“【5月更文挑战第16天】”
85 1
|
6月前
认识transform
【8月更文挑战第24天】认识transform。
95 1

热门文章

最新文章