<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画效果</title>
<style>
body{
background-color: rgba(163, 207, 255, 0.69);
}
a:link{
color: #ff5ee6;
}
h4,dt,div{
font: bold 16px "微软雅黑";
}
dt{
display: inline;
float: left;
}
div{
width:130px;
height: 130px;
text-align: center;
line-height: 130px;
color: #0d3100;
cursor: pointer;
/*指定div的通用样式属性，*/
background: rgba(108, 112, 255, 0.85);
/*同时也有变换前的效果*/
-webkit-border-radius:24px;
-moz-border-radius:24px;
border-radius:24px;
}
.fir{
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
-o-transition: background 1s linear;
transition: background 1s linear;
/*此处只需要指定要进行变化的属性，时间以及变化形式*/
}
.fir:hover{
background: #e171ff;
/*hover模式处填要变换成的样式。相当于动画中的结束帧*/
}
.sec{
-webkit-transition: background 1s linear,color 0.5s linear,width 1s linear;
-moz-transition: background 1s linear,color 0.5s linear,width 1s linear;
-ms-transition: background 1s linear,color 0.5s linear,width 1s linear;
-o-transition: background 1s linear,color 0.5s linear,width 1s linear;
transition: background 1s linear,color 0.5s linear,width 1s linear;
/*指定多个需要变化的属性以及对应的时间1s和变化样式linear，用逗号隔开，这里只用三个做了示例，还可以指定n个。*/
}
.sec:hover{
width:350px;
background: #ab1eff;
color: #fff;
/*属性值的拼写上一定要对应，比如这里你要变化background和color。background处虽然变化的也是颜色，但是这里不能写成background-color*/
}
.thi{
-webkit-transform: translateX(20px) rotate(6deg) scale(0.75);
-moz-transform: translateX(20px) rotate(6deg) scale(0.75);
-ms-transform: translateX(20px) rotate(6deg) scale(0.75);
-o-transform: translateX(20px) rotate(6deg) scale(0.75);
transform: translateX(20px) rotate(6deg) scale(0.75);
/*这是没有鼠标钱的变形效果*/
-webkit-transform-origin:center top;
-moz-transform-origin:center top;
-ms-transform-origin:center top;
-o-transform-origin:center top;
transform-origin:center top;
/*为了达到自己想要的效果，改变额一下基准点*/
-webkit-transition: -webkit-transform 1s linear, background 1s linear,color 0.5s linear;
/*这里注意，transform要和transition的前缀一样，对应的也要写上自己的前缀*/
-moz-transition: -moz-transform 1s linear, background 1s linear,color 0.5s linear;
-ms-transition: -ms-transform 1s linear, background 1s linear,color 0.5s linear;
-o-transition: -o-transform 1s linear, background 1s linear,color 0.5s linear;
transition: transform 1s linear, background 1s linear,color 0.5s linear;
}
.thi:hover{
-webkit-transform: translateX(40px) rotate(-12deg) scale(1);
-moz-transform: translateX(40px) rotate(-12deg) scale(1);
-ms-transform: translateX(40px) rotate(-12deg) scale(1);
-o-transform: translateX(40px) rotate(-12deg) scale(1);
transform: translateX(40px) rotate(-12deg) scale(1);
/*加了鼠标以后让其变形这样*/
background: #9937ff;
color: #fff;
}

</style>
</head>
<body>
<h1>transition功能的使用方法</h1>
<h4>transition:property duration timing-function delay</h4>
<dl>
<dt>property：</dt>
<dd>表示对哪个属性进行平滑过渡（<a href="#A" TARGET="_self">具体哪些属性支持？</a>）</dd>
</dl>
<dl>
<dt>duration：</dt>
<dd>表示在多长时间内完成属性的平滑过渡</dd>
</dl>
<dl>
<dt>timing-function：</dt>
<dd>表示通过什么方法来进行平滑过渡</dd>
<ul>
<li>linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)</li>
<li> ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)</li>
<li> ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)</li>
<li>ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)</li>
<li>ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)</li>
<li> cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内</li>
</ul>
</dl>

<dl>
<dt>delay：</dt>
<dd>表示延迟多长时间内完成属性的平滑过渡</dd>
</dl>

<hr/>
<h1>transition功能的使用示例一</h1>
<h4>鼠标经过变换背景颜色（平滑一个属性值）</h4>
<div class="fir">文字</div>
<hr/>
<h1>transition功能的使用示例二</h1>
<h4>鼠标经过变换属性（同时平滑多个属性值）</h4>
<div class="sec">文字</div>
<hr/>
<h1>transition功能的使用示例三</h1>
<h4>鼠标经过变换属性（同时平滑多个属性值,并与transform属性结合变化形状）</h4>
<div class="thi">文字</div>
<hr/>
<h1>总结</h1>
<h4>transition只能指定变化的开始值和终止值，然后中间进行线性或其他自己指定的变化。要想设置多个关键帧，还是要靠<a href="10-2-animation制作帧动画">animation</a></h4>
<hr />
<h1 id="A">Finally，支持transition的属性以及其需要调换的类型</h1>
<h4><a href="http://css.doyoe.com/properties/transition/transition-property.htm" target="_blank">摘自css参考手册</a></h4>
属性名称 类型
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number
《2016-08-10 15:17 xing.org1^》
</body>
</html>

CSS3的transition动画功能的更多相关文章

  1. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  2. css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...

  3. CSS3中的动画功能（二）

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  4. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  5. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  6. css3动画功能介绍

    一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性 ...

  7. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  8. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  9. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

随机推荐

  1. Windows Server+AMD GPU+HDMI时_黑边_不铺满问题的解决办法

    HDMI接显示器或电视,有黑边或者被放大了是个很常见的问题,显卡设置界面里改下Scale或者Overscan/Underscan就行,可问题是WindowsServer版的CCC没有控制颜色对比度和缩 ...

  2. foreach 和 for 循环的区别

    foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后每次再执行 var a in Ge ...

  3. Centos|Rhel搭建vsftp

    vsftp,在ftp传输中相对安全的 01.安装vsftpd yum install -y vsftpd 版本信息: Installed PackagesName        : vsftpdArc ...

  4. iOS- -安装cocopods

    已经不是第一次安装cocoapods了, 但是今天在自己的mac pro 安装cocoapods 出现了 Error installing pods:active support requires R ...

  5. LVS ip-tun服务器脚本

    ifconfig tunl0 192.168.10.10 netmask 255.255.255.255 up route add -host 192.168.10.10 dev tunl0 ipvs ...

  6. jq不包含某属性

    jq解释属性选择器时有以下四种: 上面都是带某属性或者属性为某值的情况,还有一种情况是不带某属性怎么办? 答案是同属性不为某值. 如 <a b='c' class="d"&g ...

  7. 理解MySQL数据库覆盖索引

    话说有这么一个表: CREATE TABLE `user_group` ( `id` int(11) NOT NULL auto_increment, `uid` int(11) NOT NULL, ...

  8. Linux内核参数配置

    Linux在系统运行时修改内核参数(/proc/sys与/etc/sysctl.conf),而不需要重新引导系统,这个功能是通过/proc虚拟文件系统实现的. 在/proc/sys目录下存放着大多数的 ...

  9. 文本溢出省略解决笔记css

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; *white-space:nowrap;

  10. Swift基础--可选绑定和守护绑定

    Swift中的可选绑定和守护绑定 1.可选绑定 格式 // 通过url来创建request对象 if let tempUrl = url { // url为可选类型,当可选类型有值,才执行大括号里面的 ...