css3过渡

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35325795/article/details/80686925

1、animation  

动画-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
    * -webkit-animation-duration: 10s;/*动画持续时间*/
    * -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
    ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (<number> , <number>, <number>, <number>)
    * -webkit-animation-delay: 2s;/*动画延迟时间*/
    * -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
    * -webkit-animation-direction: alternate;/*定义动画方式*/

animation:[<animation-name> || <animation-duration> ||<animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>] [,[<animation-name> || <animation-duration> || <animationtiming-function> || <animation-delay> || <animationiteration-count> || <animation-direction>] ]*

.all { -webkit-animation:autoscroll 5s linear infinite; }

2、关键帧(语法)

    @KEYFRAMES写法
    @keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }

    }

3、观看视角
    body{-webkit-perspective:0;}
    /*此处表示从零视角进行观看*/

    示例:webkit-perspective:800;

    -webkit-perspective-origin


阅读更多
换一批

没有更多推荐了,返回首页