CSS3,用transition实现过渡动画

用到了transition就先说说这个属性吧！

一、transition属性简介

transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画！在CSS3出现之前，网页上的动画大多是用flash实现的，flash动画会产生很大的弊端！操作不便等等

1. 语法

  transition: property duration timing-function delay;

2. 定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

--规定设置过渡效果的 CSS 属性的名称。

transition-duration

--规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

--规定速度效果的速度曲线。

transition-delay

--定义过渡效果何时开始。

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

  transition-property: none|all|property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

  transition-duration: time;

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

transition-timing-function 属性

transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

  transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。推荐个有意思的链接，贝塞尔曲线链接

transition-delay

transition-delay 值以秒或毫秒计。

  transition-delay: time;

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

值	描述
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

二丶介绍下他们的使用情况吧

1.首先，先写个字体出来吧！那就我上一篇介绍的火焰字好了！上篇的代码对这篇的代码不会有干扰的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小效果</title><style type="text/css">/*通配符重置浏览器默认的两个值，对本文没有太大影响，不知道可以无视*/*{margin: 0;padding: 0;}.div1{width: 300px;height: 100px;padding-top: 20px;line-height: 100px;margin:200px auto 0;text-align: center;font-size: 40px;font-weight: bold;font-family: "华文行楷";background: #000;color:#F60;}</style>
</head>
<body><div class="div1">超炫火焰字</div>
</body>
</html>

效果如图：

2.其次，我们在.div{..略..}后面加上如下代码

.div1:hover{text-shadow: 0px 0px 2px #fff,0px -3px 3px #1EB,0px -6px 4px #01DEFD,0px -9px 5px #0BF,0px -12px 6px #08F;}

我们就会发现当我们鼠标移进这个div的时候，文字的阴影是不是一瞬间出现的？很明显是的

3.最后，我们在.div{..略..}里面加上如下代码


    transition-property: all;/*变化的东西。all是所有*/transition-duration: 1s;/*变化过程的时间*/transition-timing-function: linear;/*linear是匀速变化*/transition-delay: 0s;/*没有延迟变化*//*下面的是简写属性*//*transition:all 1s linear 0s;*/

我们是不是发现这个背景阴影是不是经过1s中的过渡过程才能达到最后的变化？这样是不是感觉灰常有意思？

变化过程：

变化结果：

好了，本次文章到此结束，谢谢观看

用css3的transition实现过渡动画相关推荐

html的过渡属性,CSS3属性transition（过渡）多属性详解
transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
Android Transition过渡动画
在Android 4.4 Transition 就已经引入了,但在Android 5.0(API 21)之后,Transition 被更多的应用起来.相对于View Animation或Propert ...
【LVGL 学习】样式（style）过渡动画学习
transition:过渡动画当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户.通过过渡动画(transition)可以让样式的改变更自然.例如,按钮在点击时,以及开关在切换时,都具有一小 ...
css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
CSS3过渡动画关键帧动画
一.过渡动画过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
解决前端css3使用transition刷新页面取消过渡显示
解决前端css3使用transition刷新页面取消过渡显示今天在使用transition时遇到一个问题,刷新页面后不会直接显示样式,而是会显示初始效果过渡到样式效果的动态效果, 查了很多资料,找到 ...
过渡动画 css3渐变
1. 过渡动画:是从一个状态渐渐过渡到另一个状态可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性不影响页面布局经常和hover 一起搭配使用 /* ...

用css3的transition实现过渡动画