CSS3 & transition & animation

2022-11-03 21:01:40

CSS3 & transition & animation

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function



.circle-box{

    position: relative;

    margin: 100px auto;

    width: 300px;

    height: 300px;

    background: #ccc;

    border: 1px solid red;

    border-radius: 50%;

    transform: rotate(var(--defaultAngle));

    transition: 1s 0.5s all ease-in-out;

    /* animation: autoRotate 1s 1 both ease; */

}

.rotate-angle {

    transform: rotate(var(--newAngle));

}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function



.circle-box{

    position: relative;

    margin: 100px auto;

    width: 300px;

    height: 300px;

    background: #ccc;

    border: 1px solid red;

    border-radius: 50%;

    transform: rotate(var(--defaultAngle));

    /*transition: 1s 0.5s all ease-in-out; */

     animation: autoRotate 1s 1 both ease;

}

.rotate-angle {

    transform: rotate(var(--newAngle));

}

@keyframes autoRotate {

    0% {

        transform: rotate3d(0, 0, 1, var(--defaultAngle));

    }

    to {

        transform: rotate3d(0, 0, 1, var(--newAngle));

    }

}

@keyframes autoRotate {

    0% {

        transform: rotate3d(0, 0, 1, var(--beginAngle));

    }

    to {

        transform: rotate3d(0, 0, 1, var(--endAngle));

    }

}

full demo

@charset "UTf-8";

/* app.css */

:root{

    --beginAngle: 0deg;

    --endAngle: 0deg;

    /* fixed angle enums */

    --defaultAngle: 0deg;

    --newAngle: 30deg;

    /* positive */

    --rotateAngle30: 30deg;

    --rotateAngle60: 60deg;

    --rotateAngle90: 90deg;

    --rotateAngle120: 120deg;

    --rotateAngle150: 150deg;

    --rotateAngle180: 180deg;

    --rotateAngle210: 210deg;

    --rotateAngle240: 240deg;

    --rotateAngle270: 270deg;

    --rotateAngle300: 300deg;

    --rotateAngle330: 330deg;

    --rotateAngle360: 360deg;

    /* negative */

    --rotateAngle-30: -30deg;

    --rotateAngle-60: -60deg;

    --rotateAngle-90: -90deg;

    --rotateAngle-120: -120deg;

    --rotateAngle-150: -150deg;

    --rotateAngle-180: -180deg;

    --rotateAngle-210: -210deg;

    --rotateAngle-240: -240deg;

    --rotateAngle-270: -270deg;

    --rotateAngle-300: -300deg;

    --rotateAngle-330: -330deg;

    --rotateAngle-360: -360deg;

}

* {

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}

html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

}

.data-btn{

    padding: 1px 6px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    cursor: default;

}

.circle-box{

    position: relative;

    margin: 100px auto;

    width: 300px;

    height: 300px;

    background: #ccc;

    border: 1px solid red;

    border-radius: 50%;

    transform: rotate(var(--defaultAngle));

    transition: 1s 0.5s all ease-in-out;

    /* animation: autoRotate 1s 1 both ease; */

}

.rotate-angle {

    transform: rotate(var(--newAngle));

}

@keyframes autoRotate {

    0% {

        transform: rotate3d(0, 0, 1, var(--defaultAngle));

    }

    to {

        transform: rotate3d(0, 0, 1, var(--newAngle));

    }

}

@keyframes autoRotate {

    0% {

        transform: rotate3d(0, 0, 1, var(--beginAngle));

    }

    to {

        transform: rotate3d(0, 0, 1, var(--endAngle));

    }

}

.menus-mask {

    position: absolute;

    top: 230px;

    left: 50%;

    transform: translate(-50%);

    width: 600px;

    height: 400px;

    background: rgba(123,123,123,0.5);

    z-index: 999;

}

.horizontal-line{

    position: absolute;

    width: 50vw;

    height: 0;

    border-top: 1px solid red;

    top: calc(100px + 300px / 2);

    left: 50%;

    transform: translateX(-50%);

}

.vertical-line {

    position: absolute;

    width: 0;

    height: calc(50vh + 300px /2 );

    border-left: 1px solid red;

    top: calc(100px / 2);

    left: 50%;

    transform: translateX(-50%);

}

.circle {

    /* position: absolute; */

    width: 30px;

    height: 30px;

    line-height: 30px;

    background: #f0f;

    text-align: center;

    vertical-align: middle;

    cursor: pointer;

    border-radius: 0 0 15px 15px;

}

/*

.circle::before {

    content: "";

    width: 6px;

    height: 6px;

    position: absolute;

    left: 9px;

    top: 0px;

    border: 2px solid #FFF;

    border-radius: 50%;

    z-index: -1;

}

.circle::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 100%;

    height: 30px;

    width: 30px;

    background-color: #00c991;

    border-radius: 50% 50% 0;

    transform: translate(-50%, -50%) rotate(45deg);

    z-index: -1;

} */

.circle-highlight::after {

    background-color: #f82eb5;

}

.circle1{

    transform: rotate(-60deg) translateX(-50px) translateY(35px);

}

.circle2{

    transform: rotate(-30deg) translateX(calc(150px - 87px)) translateY(9px);

}

.circle3{

    transform: rotate(0deg) translateX(calc(150px - 15px)) translateY(-73px);

}

.circle4{

    transform: rotate(30deg) translateX(calc(150px + -13px)) translateY(-175px);

}

.circle5{

    transform: rotate(60deg) translateX(80px) translateY(-255px);

}

.circle6{

    transform: rotate(90deg) translateX(-15px) translateY(calc(-300px + 15px));

}

.circle7{

    transform: rotate(120deg) translateX(calc(-106px)) translateY(-243px);

}

.circle8{

    transform: rotate(150deg) translateX(-155px) translateY(-150px);

}

.circle9{

    transform: rotate(180deg) translateX(calc(-150px + 15px)) translateY(-45px);

}

.circle10{

    transform: rotate(-150deg) translateX(-47px) translateY(35px);

}

.circle11{

    transform: rotate(-120deg) translateX(77px) translateY(50px);

}

.circle12{

    transform: rotate(-90deg) translateX(calc(195px)) translateY(-15px);

}

.menus {

    background: url("./menus.svg")

}

cubic-bezier

cubic-bezier(p1, p2, p3, p4)

An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#cubic-bezier-timing-function



.test{

    transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

}

.cb {

    transition-timing-function: cubic-bezier(0.2,-2,0.8,2);

}