美文网首页
transition动画

transition动画

作者: 暴走的金坤酸奶味 | 来源:发表于2018-09-13 07:27 被阅读0次

1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

  1. all代表所有的动画
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3过渡动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*在哪产生动画、动画的时间、运动曲线、延迟*/
            /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
            transition: all 500ms ease;
        }
        .box:hover{
            width: 500px;
            height: 300px;
            background-color: red;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

相关文章

  • 前端知识归纳(3)-- HTML/CSS(part2 CSS动画

    目录概览: transition animation 常见CSS动画库 动画性能优化 一、transition 概...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • CSS动画相关

    1.transition动画过渡属性 transition-property 设置过渡属性 transition-...

  • CSS3过渡动画

    过渡动画 transition属性简介transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!列...

  • 前端09

    过渡动画 transition产生动画border-radius圆角设置过渡的时间:transition-dura...

  • 动画

    过渡动画 transition产生动画border-radius圆角设置过渡的时间:transition-dura...

  • 动画

    transition动画语法 说明transition-propety 设置过渡的属性transition-d...

  • 开发周报 12月 - 1

    1.UIView 封装的动画Transition UIView层 对于transition 的翻转动画有2种 这个...

  • 动画

    过渡动画transition属性简介 transition是网页上的变化的逐渐过渡效果 例:transition:...

  • 动画

    过渡动画transition属性简介 transition是网页上的变化的逐渐过渡效果 例:transition:...

网友评论

      本文标题:transition动画

      本文链接:https://www.haomeiwen.com/subject/mpmigftx.html