সিএসএস 3 দিয়ে কীভাবে ঝলকানি / ঝলকানি লেখা তৈরি করবেন

Question

বর্তমানে, আমার কাছে এই কোডটি রয়েছে:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

এটি জ্বলজ্বল করে তবে এটি কেবল "এক দিকে" জ্বলজ্বল করে। আমার অর্থ, এটি কেবল বিবর্ণ হয়ে যায়, এবং তারপরে এটি opacity: 1.0আবার উপস্থিত হয়, তারপরে আবার বিবর্ণ হয়ে যায়, আবার উপস্থিত হয়, এবং আরও কিছু ...

আমি এটি বিবর্ণ হয়ে যেতে চাই এবং তারপরে এই বিবর্ণ থেকে আবার "উত্থাপন" করতে পারি opacity: 1.0। এটা কি সম্ভব?

Comments

আপনি এই পৃষ্ঠার ডান দিকে কটাক্ষপাত, তাহলে একটি কলাম এনটাইটেল করা হয় সংশ্লিষ্ট অনেক 'এর সাথে সম্পর্কিত' বিষয় সঙ্গে। এর মধ্যে কয়েকটি দেখুন ... আপনি আপনার প্রয়োজনীয় সমস্ত অধ্যয়ন করতে সক্ষম হবেন।

— মিলচে প্যাটার্ন

আপনি ব্র্যাডশায়

— মিলচে প্যাটার্ন

কোনও অপরাধ নেই, যদি তিনি তাঁর পাঠ্যটি ঝলকিয়ে দিতে চান তবে তিনি তাঁর পাঠ্যটি ঝলকিয়ে দিতে চান। এটি কোন বছর তা বিবেচ্য নয়। বিশ্বের সর্বাধিক উদ্ভাবনী ব্যক্তিরা হলেন যারা বিধি দ্বারা জীবনযাপন করেন না। একেবারে বিপরীত, তারা সাধারণত তাদের বিরতি দেয় এবং তারপরে, প্রত্যেকে তাদের অনুলিপি করে। আমার ধারণা অ্যাপল একটি দুর্দান্ত উদাহরণ। ম্যাকি ইত্যাদিও তাই, আমি যদি লোকেরা নিজের পক্ষে তাদের মতামত রাখে এবং কেবলমাত্র প্রশ্নের উত্তরটি দেয় :-) ঠিক উত্তর দেওয়া যায় তবে আমি আরও ভাল বোধ করব said কিছুটা কঠোর মনে হচ্ছে তবে আমি কাউকে অসন্তুষ্ট করতে চাই না prov কঠোরানুভুতি নেই. ;-)

— লরেন্স

CSS3 অ্যানিমেশন সহ একটি ঝলক ট্যাগ

— মাইকেল ফ্রেইজিম

পৃষ্ঠা লোডে ফেড-ইন প্রভাবের জন্য সিএসএস ব্যবহারের

— zloctb

Answer 1

আপনিই প্রথম সেটিং হয় opacity: 1;এবং তারপর আপনি এটিতে বিভক্তি হয় 0, তাই এটি থেকে শুরু 0%এবং এর শেষ সীমা 100%, তাই পরিবর্তে শুধু অস্বচ্ছতা নির্ধারণ করে 0এ 50%এবং বাকি নিজেই যত্ন নিতে হবে।

ডেমো

.blink_me {
  animation: blinker 1s linear infinite;
}

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

<div class="blink_me">BLINK ME</div>

এখানে, আমি হতে অ্যানিমেশন সময়কাল সেটিং করছি 1 second, এবং তারপর আমি সেটিং করছি timingকরার linear। তার মানে এটি সর্বত্র স্থির থাকবে। শেষ, আমি ব্যবহার করছি infinite। তার মানে এটি চলতে থাকবে।

নোট: যদি এই আপনার জন্য কাজ করে না, ব্যবহার ব্রাউজার উপসর্গ পছন্দ -webkit, -mozইত্যাদি জন্য প্রয়োজনীয় animationএবং @keyframes। আপনি আমার বিস্তারিত কোড এখানে উল্লেখ করতে পারেন

---

মন্তব্য করা হয়েছে, এটি ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলিতে কাজ করবে না এবং এর জন্য আপনার jQuery বা জাভাস্ক্রিপ্ট ব্যবহার করা দরকার ...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

^{আরও ভাল পদ্ধতির পরামর্শ দেওয়ার জন্য আলনিটাককে ধন্যবাদ ।}

ডেমো (jQuery ব্যবহার করে ব্লিঙ্কার)

Comments

কেবলমাত্র লক্ষ্য করা গেছে যে এটি, একটি পাঠ্যের উপাদানটিতে প্রয়োগ করা হয়েছে, ফায়ারফক্স ব্যবহার করে আমার কম্পিউটারে হাস্যকর পরিমাণের সিপিইউ গ্রহণ করে। সতর্ক থাকুন।

— অ্যালেক্স

সমাধান

— সহজলভ্য সমাধানযোগ্য হিসাবে

@ মিঃআলিয়েন দুজনের মধ্যে কোনও সমন্বয় নেই - বিবর্ণতা টাইমারের তুলনায় খানিকটা বেশি সময় নেবে (এবং টাইমারগুলি কোনওভাবেই নির্ভরযোগ্য নয়) এবং অবশেষে আপনি সম্ভবত উপাদানটিতে সারিযুক্ত অ্যানিমেশনগুলির সীমাবদ্ধভাবে শেষ করবেন না। সঠিক পন্থাটি টাইমার ছাড়াই করানো এবং "পুনরাবৃত্তভাবে" কলটি blinkerসম্পূর্ণ হওয়া কলব্যাক হিসাবে করা .fadeIn।

— আলনিটাক

@ মিঃআলিয়েনও পুরো বিষয়টি কেবল একটি আইআইএফই হতে পারে - এই এক লাইন প্রাথমিক আমন্ত্রণ সহ পুরো কাজটি করবে: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();

— অ্যালনিটাক

step-endপরিবর্তে linearআমি চেয়েছিলেন কি ছিল।

— অ্যালেক্স এস

Answer 2

এর জন্য alternateমানটি ব্যবহার করুন animation-direction(এবং আপনাকে এইভাবে কোনও কেফ্রেম যুক্ত করার দরকার নেই)।

alternate

অ্যানিমেশনটি প্রতিটি চক্রকে বিপরীত দিকে চালিত করে। বিপরীতে খেললে, অ্যানিমেশন পদক্ষেপগুলি পিছনে সঞ্চালিত হয়। উপরন্তু, সময় কার্যকারিতা এছাড়াও বিপরীত হয়; উদাহরণস্বরূপ, বিপরীতে খেললে একটি ইজি-ইন অ্যানিমেশনটি একটি ইজি-আউট অ্যানিমেশন দিয়ে প্রতিস্থাপন করা হয়। এটি একটি এমনকি বা বিজোড় পুনরাবৃত্তি কিনা তা নির্ধারণের জন্য গণনা।

সিএসএস :

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

আমি fromকীফ্রেমটি সরিয়েছি । যদি এটি অনুপস্থিত থাকে, এটি opacityমৌলটির উপর অ্যানিমেটেড সম্পত্তি ( এই ক্ষেত্রে) জন্য আপনি যে মান নির্ধারণ করেছেন তা থেকে উত্পন্ন হয় বা আপনি যদি এটি সেট না করে থাকেন (এবং আপনি এই ক্ষেত্রে নেই), ডিফল্ট মান থেকে (যা 1জন্য opacity)

এবং দয়া করে কেবল ওয়েবকিট সংস্করণ ব্যবহার করবেন না। এর পরে অপরিবর্তিত একটিকে যুক্ত করুন। আপনি যদি কম কোড লিখতে চান তবে শর্টহ্যান্ড ব্যবহার করুন ।

Comments

কীভাবে এটি দ্রুত পলক করবেন? 1.7 এর দশকের পরিবর্তন এটিকে গণ্ডগোল করে।

— অ্যালেক্স জি

@ অ্যালেক্সজি আপনি এই cubic-bezierঅংশটি ease-in-outঅন্য কোনও কিছুর সাথে প্রতিস্থাপন করতে পারেন : কিউবিক

— ড্যানিলো

+ কিউবিক-

— বেজিয়ারের

Answer 3

পুরানোগুলির মতো খাঁটি "100% চালু, 100% বন্ধ" জ্বলজ্বল পাওয়ার সর্বোত্তম উপায়টি <blink>এটি:

.blink {
  animation: blinker 1s step-start infinite;
}

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

<div class="blink">BLINK</div>

Comments

একমাত্র সত্য "ঝলক" সমাধান। এবং colorসম্পত্তি ইত্যাদির সাথেও কাজ করে Other

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

Answer 4

বিকল্পভাবে যদি আপনি শো এবং লুকানোর (যেমন একটি জ্বলজ্বলে পাঠ্য কার্সার) এর মধ্যে ধীরে ধীরে রূপান্তর না চান তবে আপনি এর মতো কিছু ব্যবহার করতে পারেন:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

প্রতিটি 1s .cursorথেকে যাব visibleকরার hidden।

যদি সিএসএস অ্যানিমেশনটি সমর্থিত না হয় (উদাহরণস্বরূপ সাফারির কয়েকটি সংস্করণে) আপনি এই সাধারণ জেএস বিরতিতে ফলব্যাক করতে পারেন:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

এই সাধারণ জাভাস্ক্রিপ্টটি আসলে খুব দ্রুত এবং অনেক ক্ষেত্রে সিএসএসের চেয়ে আরও ভাল ডিফল্ট হতে পারে। এটি লক্ষণীয় যে এটি প্রচুর ডোম কল যা জেএস অ্যানিমেশনগুলিকে ধীর করে তোলে (যেমন জিকুয়েরির ani। অ্যানিম্যাট ())।

এটির দ্বিতীয় সুবিধাটিও রয়েছে যে আপনি যদি .cursorপরে উপাদান যুক্ত করেন তবে তারা এখনও অন্য অংশের মতো ঠিক একই সময়ে প্রাণবন্ত হয়ে উঠবে .cursorযেহেতু রাষ্ট্র ভাগ করে নেওয়া হয়েছে, সিএসএসের সাথে এটি অসম্ভব যতদূর আমি অবগত রয়েছি।

Comments

এটি আইওএস সাফারির জন্য ছাড়াই ভাল কাজ করে। এটিকে সাফারি তে কাজ করতে কিভাবে কোনও ধারণা?

— জো অরস্ট

@ জোআরস্ট আমি ব্রাউজারগুলির জন্য একটি জেএস বিকল্প অন্তর্ভুক্ত করেছি যা সিএসএস অ্যানিমেশনগুলিকে সমর্থন করে না। আমার মতে এটি সাধারণত একটি ভাল সমাধান হতে পারে!

— ম্যাটস্টर्जন

Answer 5

আমি জানি না তবে কেন কেবলমাত্র visibilityসম্পত্তিটি অ্যানিমেট করা কোনও ব্রাউজারে কাজ করছে না।

আপনি যা করতে পারেন opacityসম্পত্তিটি এমনভাবে সঞ্চারিত করা যাতে ব্রাউজারটিতে পাঠ্যের বিবর্ণতা বা আস্তে আস্তে আস্তে আস্তে আস্তে আস্তে ফেলা যায় না।

উদাহরণ:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Comments

এটি নির্বোধ - কেবল ব্যবহার করুন step-start(আমার উত্তর দেখুন)।

— টিম্ম্ম্ম

নিখুঁত, ঠিক আমি যা খুঁজছিলাম। থাম্বস আপ।

— স্যামুয়েল রমজান

Answer 6

অনুসারে সময়কাল এবং অস্বচ্ছতা পরিবর্তন করুন।

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

Answer 7

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Answer 8

দেরীতে তবে আরও কীফ্রেমগুলি সহ একটি নতুন যুক্ত করতে চেয়েছিলেন ... বিল্ট-ইন কোড স্নিপেটগুলির সাথে একটি সমস্যা হওয়ায় এখানে কোডপেনের একটি উদাহরণ রয়েছে:

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

Answer 9

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Answer 10

এটি শ্রেণি ব্যবহার করে আমার জন্য কাজ করে = সংশ্লিষ্ট উপাদানগুলির জন্য ঝলক

সাধারণ জেএস কোড

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);