CSS3 एनीमेशन समारोह?

Question

मेरे पास यह pen है जो किसी चीज़ के चारों ओर घूमने वाली ऑब्जेक्ट को अनुकरण करने का प्रयास करता है। यह काम करता है, लेकिन यह चिकनी नहीं है। घूमते समय यह बाएं और दाएं किनारों के आसपास रुक जाता है।

मैंने सोचा कि यह animation-timing-function के साथ कुछ था, लेकिन ease-in-out या linear या एक कस्टम cubic-bezier समारोह की तरह में निर्मित कार्यों से किसी के साथ वांछित परिणाम नहीं मिल सकता है।

मैं एनीमेशन को चिकनी महसूस कैसे कर सकता हूं? यदि बेहतर तरीके हैं तो ऐसा कुछ किया जा सकता है, मुझे बताने में संकोच न करें।

.overlay { 
 
    background-image: -webkit-repeating-linear-gradient(0deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); 
 
    background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); 
 
    height: 200px; 
 
    position: relative; 
 
    width: 40%; 
 
    margin: auto; 
 
} 
 
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background: #888; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    display: inline-block; 
 
} 
 
.move { 
 
    -webkit-animation: moveAndGlow 2s infinite ease-in-out; 
 
    animation: moveAndGlow 2s infinite ease-in-out; 
 
} 
 
@-webkit-keyframes moveAndGlow { 
 
    25% { 
 
    background: #ccc; 
 
    -webkit-transform: scale(.5); 
 
    transform: scale(.5); 
 
    margin-top: 25px; 
 
    } 
 
    50% { 
 
    left: 100%; 
 
    margin-left: -100px; 
 
    background: #888; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    margin-top: 0; 
 
    } 
 
    75% { 
 
    background: #000; 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    margin-top: 25px; 
 
    } 
 
} 
 
@keyframes moveAndGlow { 
 
    25% { 
 
    background: #ccc; 
 
    -webkit-transform: scale(.5); 
 
    transform: scale(.5); 
 
    margin-top: 25px; 
 
    } 
 
    50% { 
 
    left: 100%; 
 
    margin-left: -100px; 
 
    background: #888; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    margin-top: 0; 
 
    } 
 
    75% { 
 
    background: #000; 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    margin-top: 25px; 
 
    } 
 
}

<div class="overlay"> 
 
    <span class="circle move"></span> 
 
</div>

Answer 1

आप एक 3 डी environement में आप तत्व ले जाना चाहते हैं, तो आप perspective संपत्ति और वास्तविक 3 डी रोटेशन का उपयोग कर सकते हैं पाया।

अभी आप पदों के बीच सीधी रेखाओं पर एनिमेट कर रहे हैं ताकि घूर्णन को अनुकरण करना लगभग असंभव हो। मैंने निम्नलिखित उदाहरण बनाया है, आपको इसे अपने प्रोजेक्ट में फिट करने के लिए आकार को ट्विक करने की आवश्यकता होगी लेकिन आपको विचार प्राप्त करना चाहिए।

भी ध्यान रखें कि मैं एक छद्म तत्व में ढाल पृष्ठभूमि डाल तो यह चलती वस्तु के सामने दिखाई देते हैं:

.overlay { 
 
    height: 200px; 
 
    position: relative; 
 
    width: 40%; 
 
    margin: auto; 
 
    perspective:500px; 
 
    margin-top:50px; 
 
} 
 
.overlay:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:-100px; left:-10%; 
 
    width:120%; height:100%; 
 
    background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); 
 
} 
 

 
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background: #888; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 50%; 
 
    margin-left:-50px; 
 
    transform: rotateY(0deg) translateX(-100px) rotateY(0deg); 
 
    display: inline-block; 
 
} 
 

 
.move { 
 
    animation: moveAndGlow 2s infinite linear; 
 
} 
 

 
@keyframes moveAndGlow { 
 
    to{ transform:rotateY(360deg) translateX(-100px) rotateY(-360deg); } 
 
}

<div class="overlay"> 
 
    <span class="circle move"></span> 
 
</div>

Answer 2

मैं इस बनाया यह चिकनी

.move { 
    -webkit-animation: moveAndGlow 2s infinite linear; 
    animation: moveAndGlow 2s infinite linear; 
} 
@-webkit-keyframes moveAndGlow { 
    25% { 
    background: #ccc; 
    -webkit-transform: scale(.5); 
    transform: scale(.5); 
    margin-top: 25px; 
     -webkit-animation-timing-function:ease-in; 
    } 
    50% { 
    left: 100%; 
    margin-left: -100px; 
    background: #888; 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    margin-top: 0; 
     -webkit-animation-timing-function:ease-out; 
    } 
    75% { 
    background: #000; 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5); 
    margin-top: 25px; 
     -webkit-animation-timing-function:ease-in; 
    } 
}