专栏首页前端说吧CSS3的transition动画功能

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 条评论
登录 后参与评论

相关文章

  • css笔记 - transition学习笔记(二)

    transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

    xing.org1^
  • CSS-项目中遇到IE兼容问题,处理随笔

    xing.org1^
  • JS-鼠标经过显示二级菜单

    xing.org1^
  • HTTP/3 初体验

    HTTP协议经过发展,目前HTTP2.0作为主流HTTP协议,已经得到一定普及,虽然国内仍然有很多连HTTPS都没上的网站,但不影响HTTP协议的发展。

    李俊鹏
  • 互动直播之WebRTC服务开源技术选型

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1631960

    后端老鸟
  • LeetCode 722. CPP删除注释(逻辑题)

    给一个 C++ 程序,删除程序中的注释。这个程序source是一个数组,其中source[i]表示第i行源码。 这表示每行源码由\n分隔。

    Michael阿明
  • 下一代超融合基础设施解锁混合云的潜力

    超融合基础设施(HCI)通过提供一种打破计算和存储之间的传统孤岛的新方法而引起人们的关注。尽管越来越多的组织正在采用它,但大部分部署都是在数据中心的外围,或虚拟...

    静一
  • 这些领域,将是科技未来的发展方向

    巨头激烈争夺的地方,就是科技未来的发展方向。 自2009年以来,微软在网络安全方面的专利申请量已经遥遥领先,拥有超过900多项专利。 在中国,网络安全被重视。工...

    企鹅号小编
  • php之laravel学习常见错误1(连载中)

    下面是我们整理的php的laravel学习的常见的错误以及解决的办法,我还会持续更新,请关注

    一个淡定的打工菜鸟
  • CSS渐变背景

    .member-top { -webkit-animation:changeBg 20s infinite; -moz-animation:changeBg 2...

    ZY_FlyWay

扫码关注云+社区

领取腾讯云代金券