css 动画 transform transition animation

Posted 2020-07-24 明天后浪

1.transform 

transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术

-webkit-transform : translate(3em,0);想右移动3em，向下移动0em

-webkit-transform : rotate(30deg);顺时针旋转30度

-webkit-transform : translate(-3em,1em);向左移动3em，向下移动1em

-webkit-transform : scale(2);尺寸放大两倍

2.transition

tansition 使可以让页面动起来

 -webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 transition: all 2s ease-in-out;


3.animation

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
动画