CSS3的transition动画功能

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏儿童编程

Processing雁群实验(续)

(1)旋转复杂不规则图形; (2)运用二维数组定义图形; (3)鼠标左右移动控制物体沿 Y 轴旋转; (4)点击鼠标线条变色。

1442
来自专栏前端小吉米

SVG 动画精髓

2685
来自专栏Android先生

Android知识总结——Path常用方法解析 - 简书

前言:开发过程中很容易忘记一些API的使用方法,网上搜索或者在源码里找也很难短时间内筛选出自己需要的,遂自己将这些知识总结一番

1093
来自专栏河湾欢儿的专栏

盒子模型

1> padding内填充(padding在元素的边框以内,内容之外,padding会显示元素的背景) Top|right|bottom|left

1003
来自专栏懒人开发

(10.5)James Stewart Calculus 5th Edition:Conic Sections

832
来自专栏图形学与OpenGL

10.4.3 编程实例-太阳系动画

glClearColor(0.0f, 0.0f, 0.0f, 0.8f); //背景为黑色

1183
来自专栏杂七杂八

Matplotlib 绘2D图

Matplotlib 是一个非常简单而又完善的开源绘图库。那么它到底有多简单呢? 基本知识 首先官方文档奉上 下面,我们通过 3 行代码绘制一张简单的折线图...

6795
来自专栏闪电gogogo的专栏

Matplotlib

1562
来自专栏计算机视觉与深度学习基础

Leetcode 221. Maximal Square

Given a 2D binary matrix filled with 0's and 1's, find the largest square conta...

20810
来自专栏cnblogs

Css3新特性应用之过渡与动画

一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

3107

扫码关注云+社区

领取腾讯云代金券