CSS3中transform,transition和animation的简单介绍和使用方法演示样例
2017-04-26 15:47
691 查看
transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性。
transition是一个属性。它是用来控制过渡效果的,由于用transform能够添加变换效果。而那个变换是瞬间突变。假设想让这个变化是平滑的、过渡型的。则要用transition来控制。设定要控制的属性和过渡的时间就可以。
animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个參数制定想要加入的动画名称。执行时间。执行次数等等。
/* Float using transition */ .float { transition-property: transform; transition-duration: .3s; } .float:hover { transform: translateY(-5px); }
/* Pulse using animation*/ @keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(.9); } } .pulse { } .pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }
transition是一个属性。它是用来控制过渡效果的,由于用transform能够添加变换效果。而那个变换是瞬间突变。假设想让这个变化是平滑的、过渡型的。则要用transition来控制。设定要控制的属性和过渡的时间就可以。
animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个參数制定想要加入的动画名称。执行时间。执行次数等等。
/* Float using transition */ .float { transition-property: transform; transition-duration: .3s; } .float:hover { transform: translateY(-5px); }
/* Pulse using animation*/ @keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(.9); } } .pulse { } .pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }
相关文章推荐
- InputStreamReader 和 OutputStreamWriter类使用方法简单介绍,及演示。
- css3 transform, transition, animation区别和使用场景
- 展示C代码覆盖率的gcovr工具简单介绍及相关命令使用演示样例
- InputStreamReader 和 OutputStreamWriter类使用方法简单介绍,及演示。
- Mockito的简单使用方法演示样例
- APIDemo学习笔记——Android上几种简单的Animation使用方法(三)——3D Transition
- CSS3 -- 常用方法Transform,Transition,Animationy
- QT-Linguist使用方法简单介绍
- QT-Linguist使用方法简单介绍
- Android MediaPlayer使用方法简单介绍
- Android MediaPlayer使用方法简单介绍
- CSS3 -- 区别Transform,Transition,Animation一句话
- 软件包管理 之 file.src.rpm 使用方法的简单介绍
- 【ABAP】LSMW使用IDoc方法的简单介绍
- QT-Linguist使用方法简单介绍
- Android 中的 Animation 使用方法和介绍
- Android MediaPlayer使用方法简单介绍
- 简单介绍使用MD5加密的方法
- linux file.src.rpm 使用方法的简单介绍
- 优化防火墙得力助手ipset介绍及简单使用方法