Question

我正在尝试使用CSS创建动画，当页面加载时会弹出并旋转。我遇到的问题是，我需要在动画开始之前旋转元素。

我无法判断问题是否与此CSS代码段有关：

        .container {
            background:red;
            background-image: url(img/2012-04-12_14-06-35_758-1.jpg);
            background-position: center;
            background-repeat: no-repeat;
            padding:240px;
            padding-left: 300px;
            padding-right: 300px;
            padding-top:10px;
            -webkit-animation: logo-appear 0.6s, logo-rotate 1.6s;
            -moz-animation: logo-appear 0.6s, logo-rotate 1.6s;
            animation: logo-appear 0.6s, logo-rotate 1.6s;
        }

或者，如果有办法用jQuery设置旋转的positiong。有什么建议吗？

修改：为了澄清，我正在尝试做的是

有一个div负载，旋转45度
弹出div（logo-appear）
将div向下旋转45度（徽标旋转）

为什么我要这样？我想要一个菱形元素加载并旋转它使它成为正方形。

Answer 1

想出来。这是一个旋转与弹出序列一起发生的问题。

JSFiddle：http://jsfiddle.net/s8hae5dz/附加动画

上一个例子：

@-webkit-keyframes logo-appear{                            
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {    
        -webkit-transform: scale(1);
    }
}

目前：

@-webkit-keyframes logo-appear{                            
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5) rotate(-45deg);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2) rotate(-45deg);
    }
    100% {    
        -webkit-transform: scale(1) rotate(-45deg);
    }
}

加载已旋转的css元素

1 个答案: