সিএসএস 3 অ্যানিমেশন সহ একটি ঝলক ট্যাগ অনুকরণ করা

Question

আমি জাভাস্ক্রিপ্ট বা পাঠ্য-সজ্জা ব্যবহার না করেই পাঠ্যের একটি টুকরোটি পুরাতন-স্কুলের শৈলীতে ঝলকানো করতে চাই।

কোনও রূপান্তর নেই, কেবল * পলক *, * পলক *, * পলক *!

---

সম্পাদনা : এটি সেই প্রশ্নের চেয়ে আলাদা কারণ আমি অবিচ্ছিন্ন ট্রানজিশন ছাড়াই জ্বলজ্বলের জন্য জিজ্ঞাসা করি , অন্য প্রশ্নগুলির ওপি জিজ্ঞাসা করে কীভাবে অবিচ্ছিন্ন রূপান্তরগুলির সাথে ঝলকানো প্রতিস্থাপন করতে হয়

Comments

এটির জন্য আমি যে সর্বোত্তম উত্তরটি পেয়েছি তা দুর্ভাগ্যক্রমে মূল পোস্টার, @ এম93 এ দ্বারা মুছে ফেলা হয়েছে, সুতরাং এটি এখনও আপলোড করা যায় না। আমি মনে করি উত্তরটি মুছে ফেলা এবং উর্ধ্বমুখী হওয়া উচিত, যেহেতু এটি সবচেয়ে সহজ সমাধান যা সবচেয়ে ভাল পলক প্রভাব তৈরি করে এবং এটি বড় ব্রাউজারগুলির সমস্ত বর্তমান সংস্করণে কাজ করে । ওয়েবকিট সিএসএস 3 অ্যানিমেশন ব্যবহার করে ইমুলেটিং <বিলিঙ্ক> এ একই সমাধানের জন্য আপনি একটি ছোট ব্লগ পোস্টও পড়তে পারেন ।

আমি যেটা বুঝতে পারি না তা কেন এখানে প্রতিটি একক উত্তরের অব্যক্তিকৃত নিয়মের পরে@-webkit-keyframes বিধি রয়েছে বলে মনে হয় এবং কারও কারও কাছে অপ্রকাশিতের পরে ঘোষণাও রয়েছে। @keyframes-webkit-animation

— BoltClock

@ বল্টক্লক: এটি কারণ CSS3 অ্যানিমেশনগুলি অপেক্ষাকৃত নতুন এবং ওয়েবকিট ব্রাউজারগুলিতে স্থিতিশীল নয়। তথাকথিত "উপসর্গ "টি এখানে এমন বিকাশকারীদের জন্য রয়েছে যারা অস্থির এবং শেষ না হওয়া সত্ত্বেও অ্যানিমেশনগুলি ব্যবহার করতে চান।

— m93a

@ এম ৯৩ এ: আমি জানি, তবে কেন জিজ্ঞাসা করা হচ্ছে যে এগুলিকে পূর্বনির্ধারিত নিয়মের পরে কেন রাখা হয়েছে এবং এর আগে নয় (দৃশ্যত আমি আমার মূল মন্তব্যটিতে আমার এই ভুলটি অন্তর্ভুক্ত করিনি, আমার ভুল))।

— BoltClock

CSS3 এর সাহায্যে ঝলকানি / ঝলকানি পাঠ্য কীভাবে

— ব্র্যাড ওয়ার্থ

Answer 1

মূল নেটস্কেপে <blink>একটি 80% শুল্ক ছিল। এটি বেশ কাছাকাছি আসে যদিও বাস্তবটি <blink>কেবল পাঠ্যকে প্রভাবিত করে:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

This is <span class="blink">blinking</span> text.

আপনি কীফ্রেম অ্যানিমেশন সম্পর্কে আরও তথ্য এখানে পেতে পারেন ।

Comments

হ্যাঁ, এটি অনেক সহজ। এটি ক্রোম এবং সাফারিতে কাজ করার জন্য আপনি ওয়েবকিট উপসর্গ যুক্ত করতে পারেন।

— m93a

ওয়েবকিট উপসর্গ ব্যতীত এটি ক্রোম / সাফারিতে কাজ করতে পারে না।

— ডেভিড পেলাইজ

আমি যা করতে উপভোগ করি তা হল, ক্লাস ঝাপটানো না করে, পলক ট্যাগ করা (সহ blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; })। এইভাবে, আপনি =) এর <blink>পরিবর্তে কেবল ট্যাগটি ব্যবহার করতে পারেন<span class="blink">

— 416E64726577

দ্রষ্টব্য: এটি কেবল ওপি-র অনুরোধিত "<ব্লিংক> অনুকরণ"। color"অন-অফ" -ব্লিংক-অ্যানিমেশন হিসাবে সম্পত্তি হিসাবে ব্যবহারযোগ্য নয় ।

— মার্টিন স্নাইডার

Answer 2

আমাকে একটু কৌশল দেখাই

আরকানসিস্কান যেমন বলেছে , আপনি CSS3 রূপান্তরগুলি ব্যবহার করতে পারেন। তবে তার সমাধানটি মূল ট্যাগ থেকে পৃথক দেখাচ্ছে।

আপনার সত্যিই যা করা দরকার তা হ'ল:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}

<span class="blink">Blink</span>

জেএসফিডাল ডেমো

Comments

@ বাহাত্তরে দুঃখিত, আমি -webkit- উপসর্গটি ভুলে গেছি । আমি মনে করি, সমস্ত প্রকৃত ব্রাউজারের জন্য তবে ক্রোম এবং সাফারি রয়েছে। এখন, আপডেটের পরে, এটি ফায়ারফক্স, ক্রোম, অপেরা, সাফারি এবং এমএসআইই 10 এর জন্য কাজ করা উচিত।

— m93a

লিখিত হিসাবে, এই উত্তরটি প্রকৃতপক্ষে ফায়ারফক্স, ক্রোম, সাফারি এবং আইই এর বর্তমান সংস্করণগুলিতে কাজ করবে ।

টাইপোর কারণে কাজ করেনি: ওয়েবকিট অংশে অ্যানিমেশন নামটি blinkঅনুপস্থিত ছিল। সংশোধন করা হয়েছে।

— Andrea Ligios

ভাল কাজ করে, ধন্যবাদ, আপনার সমাধানের ভিত্তিতে আমার বাস্তবায়ন এখানে রয়েছে: jsfiddle.net/gnx4mqc4

— হামিদ বেহনম

@ এম 9৩ এ: 0% 100% { opacity: 1.0; }বিভাগগুলি ডিফল্ট হওয়ায় , অতিরিক্ত অতিরিক্ত বলে মনে হচ্ছে, না?

— জামাদগনি

Answer 3

এই সিএসএস চেষ্টা করে দেখুন

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

This is <span class="blink">blink</span>

আপনার ব্রাউজার / বিক্রেতার নির্দিষ্ট উপসর্গ প্রয়োজন: http://jsfiddle.net/es6e6/1/ ।

Comments

এমএস-অ্যানিমেশন বা-অ-অ্যানিমেশন এবং-মোজ-অ্যানিমেশন এর মতো কিছুই কেবল সংস্করণ 15 এ ছিল না, এখনই এটি ব্যবহার করবেন না। প্রকৃত সমর্থন দেখতে caniuse.com এ দেখুন। দুঃখিত তবে আমি এই প্রশ্নটি গ্রহণ করব না :( পিএস: আপনি অন্যের উত্তরগুলিতে 'সম্পাদনা' ব্যবহার করতে পারেন

— m93a

এটি কেবল আমার পুরানো খারাপ অভ্যাস - সমস্ত নতুন CSS3 বৈশিষ্ট্যে প্রত্যয় যুক্ত করুন .. আপডেট উত্তর।

— বেলিয়াশ

এটি "জ্বলজ্বলে" নয় "জ্বলজ্বলে - বিবর্ণ"।

— মার্টিন স্নাইডার

Answer 4

এর আসলে প্রয়োজন নেই visibilityবা opacity- আপনি কেবল ব্যবহার করতে পারেন color, যা কেবল কোনও লেখায় "জ্বলজ্বলে" রাখার উল্টো দিক রয়েছে:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, <blink>this text will blink</blink>, this will not.

ফিডল: http://jsfiddle.net/2r8JL/

Comments

চমৎকার! এটি একমাত্র সমাধান যা কেবলমাত্র পাঠ্য-জ্বলজ্বল করে। অন্যান্য সমস্ত সমাধান উপাদানটির পটভূমিটিও ঝাপটায়। পরীক্ষা করতে, সবুজ ব্যাকগ্রাউন্ড <span>সহ সাদা রঙের নীল লেখার সাথে একটি ব্যবহার করুন <body>। কেবলমাত্র এই দ্রবণগুলিতে, নীল রঙের স্প্যান পটভূমিটি জ্বলবে না।

— জামাদগনি

Answer 5

আমি এর জন্য জাহান্নামে যাচ্ছি:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (বরবনের সাথে স্যাস)

Comments

আপনার কোডেপেন একটি Undefined mixin 'experimental'.ত্রুটি উত্পন্ন করে এবং এর ফলে দেখে মনে হচ্ছে এটি জ্বলজ্বলে অ্যানিমেশনটি সংকলন এবং প্রদর্শন করবে না।

Answer 6

অন্য একটি প্রকরণ

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

This is <span class="blink">blink</span>

Answer 7

এটি আমার কেসটি 1 সেকেন্ডের ব্যবধানে জ্বলজ্বলে লেখা কাজ করছে।

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}

Answer 8

যদি আপনি কিছু গ্লো এফেক্ট চান এটি ব্যবহার করুন

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

Answer 9

আপনার কোডের জন্য নীচের সমাধান সন্ধান করুন।

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>