Fork me on GitHub

CSS3-浏览器相关

发表于 | 分类于

浏览器前缀

IE：-ms-
Firefox：-moz-
Chrome：-webkit-
Safari：-webkit-
Opera：-o-

css3的三个动画属性

  • 变形transform
    旋转 div 元素：

    1
    2
    3
    4
    5
    6
    7
    8
    div
    {
        transform:rotate(7deg);
        -ms-transform:rotate(7deg); 	/* IE 9 */
        -moz-transform:rotate(7deg); 	/* Firefox */
        -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
        -o-transform:rotate(7deg); 	/* Opera */
    }

  • 转换transition
    把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

    1
    2
    3
    4
    5
    6
    7
    8
    div
    {
    	transform:rotate(7deg);
    	-ms-transform:rotate(7deg); 	/* IE 9 */
    	-moz-transform:rotate(7deg); 	/* Firefox */
    	-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    	-o-transform:rotate(7deg); 	/* Opera */
    }

  • 动画animation
    使用简写属性，将动画与 div 元素绑定(Internet Explorer 9 以及更早的版本不支持 animation 属性)：

    1
    2
    3
    4
    5
    div
    {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }