35
मैं एक साथ कई वेबकिट एनिमेशन चलाने की कोशिश कर रहा हूं। डेमो कर सकते हैं be seen here:एकाधिक वेबकिट एनिमेशन
HTML:
<body>
<div class="dot"></div>
</body>
जावास्क्रिप्ट:
$(function(){
$('body').append('<div class="dot" style="left:100px; top:200px"></div>');
});
सीएसएस:
body{
background: #333;
}
.dot{
background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
border-radius: 6px;
background: red;
display: block;
height: 6px;
position: absolute;
margin: 40px 0 0 40px;
width: 6px;
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-animation: shrink 2.s ease-out;
-webkit-animation: pulsate 4s infinite ease-in-out;
}
@-webkit-keyframes shrink{
0%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(2);
}
50%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1.5);
}
100%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes pulsate{
0%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
50%{
-webkit-transform: scale(1.1);
-webkit-box-shadow: 0 0 2px 2px #111;
}
100%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
}
.dot दो एनिमेशन है:
- धड़कना हटना (देखने के लिए मुश्किल है, लेकिन यह नहीं है)
शायद मैं एक अच्छा तरीका है सिंक उन्हें खोजने के लिए की जरूरत है। एक बार सिकुड़ एनीमेशन किया जाता है, पल्सेट। मैं उन्हें एक बार में नहीं चला सकता, इसलिए डॉट में टिप्पणी की गई है।
कोई सुझाव? धन्यवाद।
मुझे वास्तव में कोई एनीमेशन नहीं चल रहा है। –
@MadaraUchiha Pulsate वर्तमान एनीमेशन है और यह देखना मुश्किल है। चारों ओर छाया की तलाश करें (ज़ूमिंग मदद कर सकता है)। धन्यवाद। – ialphan
नहीं, ज़ूम इन करने के बाद भी, मैं कुछ नहीं कह सकता। मेरा इंस्पेक्टर मुझे एनीमेशन संपत्ति पर "अवैध संपत्ति मूल्य" बताता है। –