CSS过渡动画之transition

编程之家收集整理的这篇文章主要介绍了CSS过渡动画之transition编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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:11         margin: 50px auto;
12         background-color: #f00;
13         transition:all 1s;
14     }
15     /*css中的:hover选择器用于选择鼠标指针浮动在上面的元素。*/
16     .Box:hover{
17  200px;
18 19         border-radius: 50%;
20  #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全部内容,希望文章能够帮你解决CSS过渡动画之transition所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。 CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。 概述 看一段比
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注