CSS 애니메이션에서 사인 및 코사인 곡선을 시뮬레이션하는 예 공유

오늘은 CSS3 포물선 애니메이션을 작성해 보겠습니다 = =

포물선 애니메이션을 왼쪽에서 오른쪽으로 일시적으로 동작을 균일한 오른쪽 동작과 가변 속도 위아래 동작으로 나누어 보겠습니다.

translateX(x)를 사용할 수 있습니다. 균일한 속도 모션을 따라 요소를 이동하는 2D 변환을 정의합니다. out: 애니메이션이 낮은 속도로 시작하고 끝납니다.

1.html

<div id="container">
      <div class="demobox">
           <div class="demo"></div>
      </div>
      <div class="demobox">
            <div class="demo"></div>
      </div>
</div>

데모박스의 p를 일정한 속도로 오른쪽으로 움직이게 하고, 내부의 데모박스의 p를 위아래로 가변속도로 움직이게 합니다.

2.css

#container {
    height:110px;
    font-size:0;
    width:140px;
}
.demobox {
    float:right;
    width:5px;
    height:5px;
    animation:myfirst1 linear 5s infinite;
    -webkit-animation:myfirst1 linear 5s infinite; 
}
.demo {
    width:6px;
    height:6px;
    border-radius:3px;
    background:#90e4e9;
    animation:myfirst2 ease-in-out 1s infinite alternate;
    -webkit-animation:myfirst2 ease-in-out 1s infinite alternate;  /*Safari and Chrome */
}

.demobox:nth-of-type(1) .demo:nth-of-type(1){
    animation-delay:0s;
}
.demobox:nth-of-type(2) .demo:nth-of-type(1){
   animation-delay:0.03s;
}

@keyframes myfirst1
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
    
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
}
@keyframes myfirst2
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}

좋아, 사인과 코사인 곡선이 나왔다 @^-^@

위 내용은 CSS 애니메이션에서 사인 및 코사인 곡선을 시뮬레이션하는 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!