.canva2 {
    border-style: dotted;
    border-color: rgb(197, 37, 37);
    border-width: 3px;
    width: 350px;
    height: 300px;
    margin: auto;
    padding: auto;
}

.static {
    width: 150px;
    height: 150px;
    background: rgb(39, 24, 24);
    position: relative;
    left: 100px;
    top: 50px;
    opacity: 0.10;
    box-shadow: 0 0 20px #fff, -20px 0 80px #f0f, 20px 0 80px #0ff, inset 0 0 50px #fff, inset 50px 0 80px #f0f, inset -50px 0 80px #0ff, inset 50px 0 300px #f0f, inset -50px 0 300px #0ff;
    animation: pulsate 6s linear infinite;
}

@keyframes pulsate {
    50% {
        transform: scale(0.4);
        box-shadow: 0 0 20px #fff, 20px 0 80px #f0f, -20px 0 80px #0ff, inset 0 0 50px #fff, inset -50px 0 80px #f0f, inset 50px 0 80px #0ff, inset -50px 0 300px #f0f, inset 50px 0 300px #0ff;
    }
}

.moving {
    width: 146px;
    height: 146px;
    background: #46d839;
    opacity: 0.50;
    top: 0px;
    position: relative;
    animation: moving-block2 5s alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes moving-block2 {
    0% {
        left: 0px;
        border-radius: 50%;
    }
    10% {
        left: 0px;
        border-radius: 50%;
    }
    50% {
        border-radius: 0%;
    }
    100% {
        left: 200px;
        border-radius: 0%;
    }
}