首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3的transition动画功能

CSS3的transition动画功能

作者头像
xing.org1^
发布2018-05-17 17:00:53
8150
发布2018-05-17 17:00:53
举报
文章被收录于专栏:前端说吧前端说吧
<!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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-08-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档