如何反转这个CSS旋转动画？

sd2nnvve 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(135)

我有这个CSS动画，我试图根据一个类添加到一个DOM节点来反转动画。我尝试了很多方法，但都没有效果。下面是我使用的代码，见下文：
EXAMPLE

// Closed state
    @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
    @-webkit-keyframes spin-close { 100% {  -webkit-transform: rotate(-0deg); } }
    @keyframes spin-close { 100% { transform:rotate(-0deg); } }

    // Open state
    @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
    @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
    @keyframes spin-open { 100% { transform:rotate(-90deg); } }

我不知道我是否看错了？请建议（演示将是真棒）。

css

来源：https://stackoverflow.com/questions/21483970/how-do-i-reverse-this-css-rotate-animation

2条答案

按热度按时间

sirbozc51#

不要用javascript或者动画，使用CSS转换：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    transition:all 1s ease-out;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}

.image:hover {
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
}

http://jsfiddle.net/Ugc5g/892/

赞(0）回复(0）举报 2023-02-01

rqmkfv5c2#

要反转旋转，只需将度数值更改为相反的值。例如，如果元素当前顺时针旋转了45度，则可以通过将其旋转-45度来反转旋转。