CSS3动画入门

CSS3动画

[TOC]
Tips:

• transition 过渡 过渡的时间 过渡的延迟等

• transform 转换的意思 移动 X、Y 轴 旋转等
  1.translate() X Y 轴 有translateX() 和 translateY() 单独设置 XY
  2.rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转
  3.scale() 放大倍数该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 设置一个参数 就是等比例缩放 设置两个参数就是分别XY轴缩放倍数
  4.skew() 该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
  5.matrix() 方法和2D变换方法合并成一个。 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

渐变色

背景色渐变

#box{
    /* 开始以及结束的颜色 */
    background:-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);

    background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);

    background:-ms-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);

    background:-mox-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
}

2D转换效果

transform 移动位置

translate(x,y) 此属性的移动到的位置
translateX() X轴移动多少位置
translateX() Y轴移动多少位置

transition 过度动画

参数一 执行过度效果的css属性()

参数二 执行过度效果持续的事件(单位是秒 ， 可以写小数)

参数三 在执行过度的速度曲线(匀速 加速 减速)

默认值 ease 先快 然后平缓;
linear 匀速执行;

参数四 延迟多长时间执行

Tips: 不同的浏览器兼容性不一样
Chrome: -webkit-transition();
IE: -ms-transition();
FireFox:-moz-transition();

缩放

transform:scale(缩放的倍数);

Tips:最好加上浏览器兼容性的处理

旋转

旋转的度数
transform:rotate(360deg);
设置旋转的中心
transform-origin:left bottom;左下角为旋转中心

3D动画

transform:rotateX(180deg);x轴 旋转180度

transform:rotateY(180deg);y轴 旋转180度

自定义动画

1.定义动画

@keyframes 动画的名称 =>定义动画

通过百分数拆分动画，可分别设置不同百分数过程中的动画

    @keyframes mymove{
        0%{left:0;top:0}    /*开始的样式 左边0 上边0*/
        25%{left:300px;top:0}   /*四分之一的样式 左边300px 上边0*/
        50%{left:300px;top:300px}   /*四分之二的样式 左边300px 上边 300px*/
        75%{left:0;top:300px}   /*四分之三的样式 左边0 上边 300px*/
        100%{left:0;top:0}  /*四分之四的时候的样式 左边0 上边0*/
    }

2.调用动画 animation:动画名称 执行的时间

    #box{
        position:absolute;
        animation：mymove 1s;
    }

animation-timing-function 速度曲线

animation-iteration-count 播放次数

默认1
infinite 循环播放

animation-direftion 是否逆向播放

默认是 normal
alternate 逆向播放

调用自定义动画的参数

1. 自定义动画名称
2. 动画执行时间
3. 动画速度曲线
4. 延迟执行时间
5. 播放次数 默认1 infinite 表示循环播放
6. 下一动画周期 是 正常播放还是逆向播放
7. 播放状态 animate-play-state通常单独使用，如果paused表示暂停

animation-play-state 动画播放状态

默认是：running
paused 暂定

动画执行完毕 保留动画最终位置

通过属性 animation-fill-mode 设置
默认是回到目的地
forward 是停止在目的地

CSS3新增的选择器（常用的）

li:first-child <li>标签中的第一个元素

    ul li:first-child{
        colro:red;
    }

li:last-child <li>标签中的最后一元素

li:nth-child(n) <li>标签中的第n个元素

li:nth-of-type(n) 类型中的第n个li元素

second 中 第 n 个li 元素

    #second li:nth-of-type(n){
        color:pink;
    }

TIPS：索引由1开始

视口

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

device-width 按照设备分辨率渲染网页
initial-scale=1.0 初始比例 1.0 不放大不缩小
maximum-scale=1.0 最大1.0倍
user-scalable=no 不允许用户放大缩小

SPA Single Page Apps 单页面应用

原理： 点击的所有连接都在一个页面中 通过控制页面的显示隐藏 实现页面的切换

HTML5 webApp HybridApp(混合App)
HTML+CSS+JavaScript(AngularJs+ionic)