CSS3 স্পিন অ্যানিমেশন

Question

আমি বেশ কয়েকটি ডেমো পর্যালোচনা করেছি এবং কেন CSS3 স্পিনটি কাজ করতে পারব না সে সম্পর্কে আমার কোনও ধারণা নেই। আমি ক্রমের সর্বশেষতম স্থিতিশীল প্রকাশটি ব্যবহার করছি।

দ্য ফিডাল: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

<div></div>

Answer 1

CSS3 অ্যানিমেশন ব্যবহার করতে আপনাকে অবশ্যই প্রকৃত অ্যানিমেশন কীফ্রেমগুলি সংজ্ঞায়িত করতে হবে ( যা আপনি নাম দিয়েছেনspin )

আরও তথ্যের জন্য https://developer.mozilla.org/en-US/docs/CSS/ টিউটোরিয়ালস / ব্যবহার_সিএসএস_অ্যানিমেশন পড়ুন

একবার আপনি অ্যানিমেশনের সময় কনফিগার করার পরে, আপনাকে অ্যানিমেশনের উপস্থিতি নির্ধারণ করতে হবে। এটি @keyframesনিয়ম ব্যবহার করে দুই বা ততোধিক কীফ্রেম স্থাপন করে করা হয় । প্রতিটি কীফ্রেম বর্ণনা করে যে কীভাবে অ্যানিমেটেড অনুক্রমের সময় নির্দিষ্ট সময়ে অ্যানিমেটেড উপাদানটি রেন্ডার করা উচিত।

---

ডেমো http://jsfiddle.net/gaby/9Ryvs/7/ এ

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Comments

আপনি পেয়েছেন ✓ কারণ আপনি এটি সর্বোত্তমভাবে ব্যাখ্যা করেছেন এবং আপনি একমাত্র উত্তর যা সমস্ত পূর্বনির্ধারিত সংস্করণ অন্তর্ভুক্ত করে।

— ই

এটি সুপার নিটপিকি, তবে আপনার সত্যিই এটি 359 ডিগ্রি এনিমেট করা উচিত। 360 এবং 0 ডিগ্রি একই রেডিয়ালি, তাই অ্যানিমেশনটি পুরো মোড়টিতে এত সংক্ষেপে বিরতি দেয়।

— অ্যাডাম গ্রান্ট

@ অ্যাডামগ্র্যান্ট আপনাকে ধন্যবাদ, এটি আজ আমার প্রায় মাথা ব্যাথার কারণ হয়ে গেছে

— ম্যাটস্লোন

আপনি 359 নয়, ৩৯৯.৯৯৯৯৯৯৯৯৯৯৯৯ ডিগ্রিতে অ্যানিমেট করতে চান rot ।

— mdonoughe

এই সমস্ত মন্তব্য যারা স্পষ্টভাবে ভুল তথ্য দিচ্ছেন তাদের স্পষ্ট করতে ... নির্বাচিত উত্তরটি পরিবর্তন ছাড়াই সঠিক। 0 এবং 360 ডিগ্রি ব্রাউজারের দৃষ্টিতে আসলে অন্যরকম, যদিও এখনও একই পয়েন্ট। উদাহরণস্বরূপ, আপনি যদি 0 ডিগ্রি থেকে 0 ডিগ্রি (বা 360deg থেকে 360deg) এ ঘোরানোর চেষ্টা করেন তবে এটি মোটেও ঘোরবে না। এটিকে 0deg থেকে 360deg এ ঘোরানো ব্রাউজারকে অ্যানিমেশনটি শেষ করার আগে বস্তুকে পুরো 360 ডিগ্রি ঘুরিয়ে দিতে বলে tells সেট করুন animation-iteration-count: infinite;এবং আপনার অ্যানিমেশনটিতে সীমাহীন ফ্রেম থাকবে। এমনকি একটি 20 মিনিটের আবর্তন ত্রুটিহীন এবং মসৃণ দেখাবে।

— জ্যাকুর্টিস

Answer 2

আপনি কোনও কীফ্রেম নির্দিষ্ট করেন নি। আমি এখানে এটি কাজ করে ।

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

আপনি এটি সহ সত্যই দুর্দান্ত জিনিসগুলি করতে পারেন। এখানে আমি আগে তৈরি একটি ।

:)

এনবি আপনি যদি প্রাক-প্রাক-বিনামূল্যে ব্যবহার করেন তবে সমস্ত উপসর্গ লিখে রেখে যেতে পারেন ।

Answer 3

সর্বশেষতম ক্রোম / এফএফ হিসাবে এবং আইই ১১ এ -ms / -moz / -webkit উপসর্গের প্রয়োজন নেই। এখানে একটি সংক্ষিপ্ত কোড (পূর্ববর্তী উত্তরের ভিত্তিতে):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

লাইভ ডেমো: http://jsfiddle.net/9Ryvs/3057/

Comments

শর্টহ্যান্ডের সাথে অ্যানিমেশন বিধিগুলি একত্রিত করুন animation: spin 4s linear infinite।

— জোশ হাবদাস

Answer 4

এইচটিএমএল হ'ল ফন্ট-দারুণ গ্লাইফিকোন।

<span class="fa fa-spinner spin"></span>

সিএসএস

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

Comments

আপনি .spin

— ব্লেয়ার

Answer 5

একমাত্র উত্তর যা সঠিক 359deg দেয়:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

এখানে একটি দরকারী গ্রেডিয়েন্ট রয়েছে যাতে আপনি প্রমাণ করতে পারেন যে এটি ঘুরছে (যদি এটি একটি বৃত্ত হয়):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

Answer 6

ঘোরার জন্য, আপনি কী ফ্রেম এবং একটি রূপান্তর ব্যবহার করতে পারেন।

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

উদাহরণ

Answer 7

সমাপ্তির স্বার্থে, এখানে একটি সাস / কম্পাস উদাহরণ রয়েছে যা কোডটি সত্যই ছোট করে দেয়, সংকলিত সিএসএসে প্রয়োজনীয় উপসর্গগুলি অন্তর্ভুক্ত করা হবে ইত্যাদি will

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

Answer 8

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

এটি আপনাকে প্রশ্নের উত্তর দিতে সক্ষম করবে

Comments

এটি বিদ্যমান বিদ্যমান উত্তরের পুনরাবৃত্তি বলে মনে হয় ।

— পাইং