Question

我正在尝试使用CSS3创建横向动画。因为我不是专家，所以我不知道我怎么能这样做。我搜索了它并找到了关键帧的教程。我使用下面的代码完成左上方和下方的动画。

   div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        -webkit-animation-name: example; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
        animation-name: example;
        animation-duration: 4s;
    }

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

但我需要交叉动画。实际上我想用CSS3为广播信号设置动画。我正在添加参考image以进一步理解。我想要感激。我知道这是一个愚蠢的问题，但我真的需要你的指导。

Answer 1

你可以这样做

＆＃13;

div {
  top: 200px
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
  -webkit-animation-fill-mode: forwards;
  animation-name: example;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:200px;}
    25%  {background-color:yellow; left:50px; top:150px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:150px; top:50px;}
    100% {background-color:red; left:200px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:200px;}
    25%  {background-color:yellow; left:50px; top:150px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:150px; top:50px;}
    100% {background-color:red; left:200px; top:0px;}
}

＆＃13;

<div></div>

＆＃13;

如何使用css创建交叉（右上）动画？

1 个答案: