একই সাথে একাধিক সিএসএস অ্যানিমেশন খেলুন

Question

আমি কীভাবে দুটি গতিতে সিএসএস অ্যানিমেশন খেলতে পারি?

• চিত্রটি একই সাথে ঘোরানো এবং বর্ধমান হওয়া উচিত।
• ঘূর্ণন প্রতি 2 সেকেন্ডে চক্র হবে।
• বৃদ্ধি প্রতি 4 সেকেন্ড পরে চক্র হবে।

উদাহরণ কোড:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ - কেবলমাত্র একটি অ্যানিমেশন (সর্বশেষে ঘোষিত) নাটকগুলি।

Comments

চিত্রটি যখন ঘোরছে তখন স্কেল করা উচিত? আমি যে উত্তরটি দিয়েছি তা কিন্তু তা নয় তবে যদি আপনার এটির প্রয়োজন হয় তবে তা করার জন্য এটি টুইট করা যেতে পারে

— রাম জি আথেরিয়া

Answer 1

টি এল; ডিআর

কমা দিয়ে আপনি নীচের সমালোচনামূলক উত্তর উত্তর অনুসারে প্রতিটি নিজস্ব বৈশিষ্ট্য সহ একাধিক অ্যানিমেশন নির্দিষ্ট করতে পারবেন।

উদাহরণ:

animation: rotate 1s, spin 3s;

আসল উত্তর

এখানে দুটি বিষয় আছে:

# 1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

দ্বিতীয় লাইনটি প্রথম একটিকে প্রতিস্থাপন করে। সুতরাং, কোন প্রভাব আছে।

# 2

উভয় কীফ্রেম একই সম্পত্তিতে প্রযোজ্য transform

বিকল্প হিসাবে আপনি ইমেজটি <div>একটিতে গুটিয়ে রাখতে পারেন এবং প্রত্যেকে পৃথক এবং বিভিন্ন গতিতে প্রাণবন্ত করতে পারেন ।

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


@keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

Answer 2

নতুন কেউ যদি এই থ্রেডটি ধরে নিয়ে আসেন, আপনি কমা দিয়ে একাধিক অ্যানিমেশন - প্রতিটি নিজস্ব বৈশিষ্ট্য সহ নির্দিষ্ট করতে পারবেন।

উদাহরণ:

animation: rotate 1s, spin 3s;

Comments

ধন্যবাদ, এটি অনেক সহজ সমাধান

— সের্গেই রটবার্ট

হ্যাঁ কমা!

— জাচারি দহন

বিভিন্ন অ্যানিমেশন বিলম্ব সম্পর্কে কি?

— ছোট্ট ক্ষুদ্র মানুষ 21

Answer 3

আপনি প্রকৃতপক্ষে একসাথে একাধিক অ্যানিমেশন চালাতে পারেন, তবে আপনার উদাহরণে দুটি সমস্যা রয়েছে। প্রথমত, আপনি যে বাক্য গঠনটি ব্যবহার করেন সেগুলি কেবল একটি অ্যানিমেশন নির্দিষ্ট করে। দ্বিতীয় শৈলীর নিয়ম প্রথমটি লুকায়। আপনি এর মতো সিনট্যাক্স ব্যবহার করে দুটি অ্যানিমেশন নির্দিষ্ট করতে পারেন:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

যেমন এই ঝাঁকুনির মতো (নীচে ব্যাখ্যা করা অন্যান্য সমস্যার কারণে আমি "ম্লান" দিয়ে "স্কেল" প্রতিস্থাপন করেছি ... আমার সাথে সহ্য করুন ।): http://jsfiddle.net/rwaldin/fwk5bqt6/

দ্বিতীয়ত, আপনার উভয় অ্যানিমেশন একই ডিওএম উপাদানগুলির একই সিএসএস সম্পত্তি (রূপান্তর) পরিবর্তন করে। আমি বিশ্বাস করি না যে আপনি এটি করতে পারেন। আপনি বিভিন্ন উপাদান, চিত্র এবং একটি ধারক উপাদান সম্ভবত দুটি অ্যানিমেশন নির্দিষ্ট করতে পারেন। শুধু এই বেহালার মতো ধারক করার অ্যানিমেশন এক প্রযোজ্য: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Comments

আমরা কমা দিয়ে নাম আলাদা করার কারণে আমরা একাধিক অ্যানিমেশন করতে পারি উল্লেখ করার জন্য ধন্যবাদ।

— জ্যাকারি দহন

Answer 4

আপনি দুটি অ্যানিমেশন খেলতে পারবেন না কারণ গুণটি কেবল একবারই সংজ্ঞায়িত করা যায়। বরং কেন আপনি প্রথমটিতে দ্বিতীয় অ্যানিমেশনটি অন্তর্ভুক্ত করবেন না এবং সময় ঠিক হওয়ার জন্য কীফ্রেমগুলি সামঞ্জস্য করবেন না?

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin-scale 4s linear infinite;
}

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Comments

ব্যবহারকারী "বিভিন্ন গতিবেগের জন্য" এসকেড করেছেন

— rnrneverdies

এটি বিভিন্ন গতিতে ঘূর্ণনটি 2 সেকেন্ডে ঘটে যখন স্কেলটি 4 সেকেন্ডে ঘটে যেহেতু দুটি অ্যানিমেশন স্টেটমেন্ট লেখার কাজ হয় না আমি কীফ্রেমগুলির মাধ্যমে টাইমিংয়ের যত্ন নিয়েছি।

— রাম জি আথেরিয়া

যদিও এটি সত্য যে আপনি একই সাথে দুটি ট্রান্সফর্ম অ্যানিমেশন খেলতে পারবেন না (কারণ একটি রূপান্তরটি অন্যটিকে ওভাররাইট করে দেবে), তবে এটি বলা ঠিক হবে না "আপনি দুটি অ্যানিমেশন খেলতে পারবেন না কারণ গুণটি কেবলমাত্র একবারেই সংজ্ঞায়িত করা যায়।" অ্যানিমেশন সহ কমা-বিচ্ছিন্ন মান ব্যবহার সম্পর্কে গৃহীত উত্তর দেখুন।

— জাস্টিন তাদেদি

Answer 5

আপনি এই জাতীয় কিছু চেষ্টা করতে পারেন

পিতামাতাকে rotateএবং চিত্রটিতে সেট করুন scaleযাতে সময় rotateএবং scaleসময় আলাদা হতে পারে

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>