CSS3 রূপান্তর - ফিড আউট ইফেক্ট

Question 1

আমি খাঁটি সিএসএসে "ফেইড আউট" এফেক্টটি বাস্তবায়নের চেষ্টা করছি। এখানে বেহালার । আমি অনলাইনে কয়েকটি সমাধান সন্ধান করেছি, তবে অনলাইনে ডকুমেন্টেশন পড়ার পরে , আমি স্লাইড অ্যানিমেশনটি কেন কাজ করবে না তা জানার চেষ্টা করছি। কোন পয়েন্টার?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

স্নিপেট প্রসারিত করুন

Question 2

পরিবর্তে আপনি স্থানান্তরগুলি ব্যবহার করতে পারেন:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

Question 3

এখানে একই পদ্ধতি করার উপায়।

বিবর্ণ প্রভাব

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

ফিডআউট প্রভাব

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: আমি আরও আপ টু ডেট টিউটোরিয়াল সিএসএস 3 ট্রানজিশন পেয়েছি: শো উপাদানগুলি এবং সরঞ্জামদণ্ডকে আড়াল করার জন্য প্রভাবগুলির মতো ফ্যাডইন এবং ফেইডআউট উদাহরণ: নমুনা কোড সহ CSS3 ট্রানজিশন ব্যবহার করে ইঙ্গিতটি লুকান বা সহায়তা পাঠ্য দেখান ।

UPDATE 2: (@ বিগ-অর্থের মাধ্যমে অনুরোধ করা বিশদ যুক্ত)

উপাদানটি দেখানোর সময় (দৃশ্যমান শ্রেণিতে স্যুইচ করে), আমরা দৃশ্যমানতাটি দেখতে চাই: তাত্ক্ষণিকভাবে লাথি মারতে দেখা যায়, সুতরাং এটি কেবল অস্বচ্ছ সম্পত্তিকে রূপান্তর করা ঠিক ok এবং উপাদানটি গোপন করার সময় (লুকানো শ্রেণিতে স্যুইচ করে) আমরা দৃশ্যমানতা: গোপনীয় ঘোষণাকে বিলম্ব করতে চাই, যাতে আমরা প্রথমে বিবর্ণ-আউট রূপান্তর দেখতে পাই। আমরা 0s সময়কাল এবং একটি বিলম্ব সহ দৃশ্যমান সম্পত্তিটিতে একটি রূপান্তর ঘোষণা করে এটি করছি। আপনি এখানে নিবন্ধ দেখতে পারেন ।

আমি জানি আমি উত্তর দিতে খুব দেরি করেছি তবে অন্যের সময় সাশ্রয় করার জন্য এই উত্তরটি পোস্ট করছি। আশা করি এটি আপনাকে সাহায্য করবে !!

Question 4

যেহেতু displayকোনও অ্যানিমেটেবল সিএসএস বৈশিষ্ট্য নয়। display:noneখাঁটি CSS3 অ্যানিমেশনগুলির সাথে একটি ফিডআউট অ্যানিমেশন প্রতিস্থাপন, সবেমাত্র সেট করা width:0এবং height:0শেষ ফ্রেমে এবং animation-fill-mode: forwardsরাখা width:0এবং height:0বৈশিষ্ট্যগুলি ব্যবহার করুন ।

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

Question 5

এটি আপনার প্রশ্নের কার্যকারী কোড।
কোডিং উপভোগ করুন ....

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>

Question 6

আপনি .dummy-wrapক্লাসে একটি অবস্থানের সম্পত্তি যুক্ত করতে ভুলে গেছেন এবং উপরের / বাম / নীচে / ডান মানগুলি স্থিতিযুক্ত অবস্থানগুলির জন্য প্রয়োগ হয় না (ডিফল্ট)

http://jsfiddle.net/dYBD2/2/

Question 7

.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

এখানে ডেমো।