码迷,mamicode.com
首页 > Web开发 > 详细

CSS过渡动画之transition

时间:2016-08-31 00:46:24      阅读:377      评论:0      收藏:0      [点我收藏+]

标签:

O(∩_∩)O~

这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。

CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。

 

概述

看一段比较学术的定义:transition主要负责页面的过渡效果,transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发,并平滑地以动画效果改变css的属性值。

 

transition的几个常用属性

1.transition-property:设置哪些属性进行过渡。

2.transition-duration:完成过渡动画需要的时间,默认为零。

3.transition-timing-function:设置动画的缓冲效果,默认是ease(逐渐变慢)。其他常用的几个值有ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)。

4.transition-delay:设置动画开始的延迟时间,默认是零。

ps:实际应用中,可以将四个属性简写到一条指令:transition:property duration timing-function delay; 实际就是把四个属性合到一块儿,中间用空格隔开。

 

实例

使用transition,实现一个过渡效果,一个红色的正方形,当鼠标进入该区域时,红色正方形放大一倍,同时变成绿色的圆形。鼠标离开,还原到初始状态。

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css的transition属性</title>
 6 </head>
 7 <style type="text/css">
 8     .box{
 9         width: 100px;
10         height: 100px;
11         margin: 50px auto;
12         background-color: #f00;
13         transition:all 1s;
14     }
15     /*css中的:hover选择器用于选择鼠标指针浮动在上面的元素。*/
16     .box:hover{
17         width: 200px;
18         height: 200px;
19         border-radius: 50%;
20         background-color: #00bf00;
21 
22         transition-property: width,height,border-radius,background-color;
23         transition-duration: 1s;
24         transition-timing-function: ease-in;
25         transition-delay: 100ms;
26     }
27 
28 </style>
29 <body>
30 <div class="box"></div>
31 </body>
32 </html>

 

CSS过渡动画之transition

标签:

原文地址:http://www.cnblogs.com/yuxiuyan/p/5824080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!