HTML过渡动画

作者: WANGLIN_HZ | 来源:发表于2018-06-11 20:15 被阅读0次

过渡与动画
HTML过渡动画
过渡动画
vue离开动画失效原因
前端-第九天-作业
动画使用库，总结
JS中的动画事件和过渡事件
CSS3过渡动画
动画core animation
Android过渡动画Scene and Transition（

1、css3过渡动画

<!DOCTYPE html>
<html>
<head>
    <title>css过渡动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*在哪产生动画、动画的时间、运动曲线、延迟*/
            /*transition: width 150ms ease,height 150ms ease 500ms,background-color 500ms ease 1s,border-radius 500ms ease 1s;*/
            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>

2、圆角阴影透明度


<!DOCTYPE html>
<html>
<head>
    <title>y圆角、阴影、透明度</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            bord:2px solid #000;
            background-color: gold;
            margin:50px auto 0;
            /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
            /*border-top-left-radius: 100px;*/
            /*border-top-right-radius: 100px;左、右上角为正圆圆角*/
            /*border-radius: 40px;曲率半径为40的圆角矩形*/
            /*border-radius: 20%;最大200px,20%既40px*/
            border-radius: 50%;/*正圆*/
        }
        .box1{
            width: 200px;
            height: 40px;
            background-color: gold;
            margin: 100px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
            box-shadow: 10px 10px 10px 0px #bfa;
    
        }
        .box2{
            width: 200px;
            height: 40px;
            background-color: gold;
            margin: 100px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
            box-shadow: 0px 0px 20px 2px red inset;
        }
        body{
            background-color: cyan;
        }
        .box3{
            width: 200px;
            height: 200px;
            /*background:url();*/
            background-color: gold;
            margin: 50px auto 0;
            border:2px solid #000;
            border-radius: 50%;
            /*透明度30%,文字也透明了*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE*/
            text-align: center;
            line-height: 200px;
        }
        .box4{
            width: 200px;
            height: 200px;
            /*背景色变透明，但文字不会透明*/
            background-color: rgba(255,215,0,0.3);
            margin: 50px auto 0;
            /*边框透明*/
            border:2px solid rgba(0,0,0,0.3);
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">床前明月光</div>
    <div class="box4">床前明月光</div>
</body>
</html>

CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;

CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

3、运动曲线

<!DOCTYPE html>
<html>
<head>
    <title>运动曲线</title>
    <style type="text/css">
        div{
            width: 50px;
            height: 50px;
            background-color: gold;
            margin-bottom: 20px;
        }
        div:nth-child(1){
            transition: all 1s linear;
        }
        div:nth-child(2){
            transition: all 1s ease;
        }
        div:nth-child(3){
            transition: all 1s ease-in; 
        }
        div:nth-child(4){
            transition: all 1s ease-ont;
        }
        div:nth-child(5){
            /*开始和结束时慢速*/
            transition: all 1s ease-in-out;
        }
        div:nth-child(6){
            transition: all 1s cubic-bezier(0.470,-0.485,0.460,1.435);
        }
        div:hover{
            width: 1000px;
        }
    </style>
</head>
<body>
    <div>linear</div>
    <div>ease</div>
    <div>ease-in</div>
    <div>ease-out</div>
    <div>ease-in-out</div>
    <div>bezier</div>
</body>
</html>

4、图片文字遮罩

<!DOCTYPE html>
<html>
<head>
    <title>图片文字遮罩</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            border-right: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        .box img{
            width: 300px;
            height: 300px;
        }
        .box .pic_info{
            width: 300px;
            height: 300px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            position: absolute;
            left: 0;
            top:300px;

        }
        .box:hover .pic_info{
            top:150px;
        }
        .box .pic_info p{
            margin: 30px;
            line-height: 20px;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="1.jpg">
        <div class="pic_info">
            <p>这是</p>
        </div>
    </div>
</body>
</html>

5、变形

<!DOCTYPE html>
<html>
<head>
    <title>变形</title>
    <style type="text/css">
        .box,.box2,.box3,.box4{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 50px auto 0;
            /*位移*/
            /*transform: translate(50px,50px);*/
            /*旋转*/
            transform: all 1s ease;
        }
        .box:hover{
            /*box的动画不会影响到box2*/
            /*位移*/
            transform: translate(50px,50px);
        }
        .box2:hover{
            /*沿z轴旋转360度*/
            transform: rotate(360deg);
        }
        .box3:hover{
            /*缩放*/
            transform: scale(0.5,0.2);
        }
        .box4:hover{
            /*斜切*/
            transform: skew(0,45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    
</body>
</html>

6、元素旋转

<!DOCTYPE html>
<html>
<head>
    <title>元素旋转</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 50px auto 0;
            transition: all 500ms ease;
            /*设置盒子按3D空间显示*/
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
        }
        .box:hover{
            /*默认沿z轴旋转*/
            /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
            /*transfrom:perspective(800px) rotateX(45deg)*/
            transform: perspective(800px) rotateY(-45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

7、变形中心点

<!DOCTYPE html>
<html>
<head>
    <title>变形中心点</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: gold;
            float: left;
            margin: 30px;
            transition: all 500ms ease;
        }
        div:hover{
            transform: rotate(-90deg);
        }
        div:nth-child(1){
            /*设置变形的中心点*/
            transform-origin: left center;

        }
        div:nth-child(2){
            transform-origin: left top;
        }
        div:nth-child(3){
            transform-origin: 50px 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

8、背面可见

<!DOCTYPE html>
<html>
<head>
    <title>背面可见</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            border:1px solid #000;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            transition: all 500ms ease;
            /*设置盒子按3d空间显示*/
            transform-style:preserve-3d;
            /*设置透视距离、三维旋转的初始角度*/
            transform: perspective(800px) rotateY(0deg);
            /*设置盒子背面是否可见*/
            backface-visibility: hidden;

        }
        .con:hover .box{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">div元素</div>
    </div>
</body>
</html>

9、图片翻面

<!DOCTYPE html>
<html>
<head>
    <title>图片翻面</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 272px;
            margin: 100px auto 0;
            position: relative;
            /*transform-style: preserve-3d;*/
            /*transform: perspective(800px) rotateY(0deg);*/

        }
        .pic, .info{
            width: 300px;
            height: 272px;
            position: absolute;
            left: 0;
            top:0;
            /*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
        }
        .info{
            background-color: gold;
            text-align: center;
            line-height: 272px;
            transform: translateZ(2px) rotateY(180deg);
        }
        /*鼠标移入时图片翻为背面隐藏*/
        .con:hover .pic{
            transform: perspective(800px) rotaeY(180deg);
        }
        /*将鼠标移入时文字翻为正面显示*/
        .con:hover .info{
            transform: perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="pic">
            <img src="by.jpg" alt="">
            
        </div>
        <div class="info">这是</div>
    </div>
</body>
</html>

10、inimation动画

<!DOCTYPE html>
<html>
<head>
    <title>animation动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*名称 时间 曲线 延迟 动画次数 返回 起始和结束的状态*/
            animation: moving 1s ease 1s 5 alternate both;
            /*动画暂停*/
            /*animation-play-state: paused;*/
        }
        .box:hover{
            /*动画运行*/
            /*animation-play-state: running;*/
        }
        /*定义一个动画，名称为moving*/
        @keyframes moving{
            /*初始状态*/
            from{
                width: 100px;
            }
            /*结束状态*/
            to{
                width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

11、animation人物走路动画

<!DOCTYPE html>
<html>
<head>
    <title>人物走路动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 200px;
            border:1px solid #000;
            margin: 50px auto 0;
            overflow: hidden;
            position: relative;
            
        }
        .box img{
            position: absolute;
            left: 0;
            top:0;
            /*steps动画步数，图片有8帧，所以设置为8步*/
            animation: walking 1s steps(8) infinite;
        }
        @keyframes walking{
            from{
                left: 0px

            }
            to{
                left: -960px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt="">
    </div>
</body>
</html>

12、浏览器前缀

<!DOCTYPE html>
<html>
<head>
    <title>浏览器前缀</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

13、loading动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多帧动画</title>
    <style type="text/css">
        .box{
            width:400px;
            height:250px;
            border:1px solid #000;
            margin:200px auto 0;
        }

        .box p{
            text-align:center;
            width:100%;
            float:left;
            margin:0;
            padding:0;
        }

        .box div{
            width:50px;
            height:100px;
            float:left;
            background-color:gold;
            margin:15px;
            margin-top: 20px; 
            border-radius:10px;
            margin-top: 40px;
        }

        .box div:nth-child(1){
            background-color:gold;
            animation:loading 200ms ease 0s infinite alternate;
        }

        .box div:nth-child(2){
            background-color:gold;
            animation:loading 200ms ease 50ms infinite alternate;
        }

        .box div:nth-child(3){
            background-color:gold;
            animation:loading 200ms ease 100ms infinite alternate;
        }

        .box div:nth-child(4){
            background-color:gold;
            animation:loading 200ms ease 150ms infinite alternate;
        }

        .box div:nth-child(5){
            background-color:gold;
            animation:loading 200ms ease 200ms infinite alternate;
        }
        
        @keyframes loading{
            from{
                 transform:scaleY(1.4);
            }

            to{
                 transform:scaleY(0.7);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <p>loading...</p>
    </div>
</body>
</html>

过渡与动画
@(HTML5)[过渡, 动画] [TOC] 五、过渡与动画过渡 transition-property：过渡属...
HTML过渡动画
1、css3过渡动画 2、圆角阴影透明度 CSS3圆角设置某一个角的圆角，比如设置左上角的圆角：border...
过渡动画
过渡动画 *{ margin: 0; padding: 0; } .one{ wi...
vue离开动画失效原因
使用vue过渡和动画，进入动画可以，离开动画失效，通过以下办法解决 css 样式设置动画 html结构这样设置以...
前端-第九天-作业
CSS3过渡动画 .box{width: 100px;height: 10...
动画使用库，总结
导航过渡、动画和转换(2D/3D)【relative】、渐变html元素隐藏的几种方式与动画一、用到的css动画...
JS中的动画事件和过渡事件
动画事件动画事件demo 过渡动画事件过渡动画事件demo
CSS3过渡动画
过渡动画 transition属性简介transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画！列...
动画core animation
type 动画过渡类型subtype 动画过渡方向
Android过渡动画Scene and Transition（
Android场景过渡——Scene and Transition（一）场景过渡动画场景过渡动画是指以动画的形...