সিএসএস অ্যানিমেশন সহ কোনও উপবৃত্ত অ্যানিমেট করার জন্য কী আছে?

92

আমি একটি উপবৃত্ত অ্যানিমেট করার চেষ্টা করছি, এবং ভাবছিলাম যে এটি সিএসএস অ্যানিমেশনগুলির দ্বারা সম্ভব কিনা ...

সুতরাং এটি মত হতে পারে

Loading...
Loading..
Loading.
Loading...
Loading..

এবং মূলত ঠিক এভাবে চালিয়ে যান। কোন ধারনা?

সম্পাদনা করুন: এটির মতো: http://playground.magicrising.de/demo/ellipsis.html

css  css-animations 
— রে
সূত্র
4
অ্যানিমেশনগুলি রূপান্তর নয় ট্রান্সফারেশন নয়। দয়া করে তাদের তিনটি মিশ্রিত করবেন না।
— বোল্টক্লক
: একটি অনুরূপ প্রশ্নের আমার উত্তর দেখুন stackoverflow.com/a/24349758/282729
— feklee

উত্তর:

88

@ Xec এর উত্তরের সামান্য পরিবর্তিত সংস্করণ সম্পর্কে কীভাবে : http://codepen.io/thetallweeks/pen/yybGra

এইচটিএমএল

একক শ্রেণি উপাদানটিতে যুক্ত হয়েছে:

<div class="loading">Loading</div>

সিএসএস

অ্যানিমেশন যা ব্যবহার করে steps। MDN ডক্স দেখুন

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@ xec এর উত্তরের বিন্দুগুলিতে আরও একটি স্লাইড-ইন প্রভাব রয়েছে, যখন এটি বিন্দুগুলি তত্ক্ষণাত্ উপস্থিত হতে পারে।

— thetallweeks
সূত্র
4
মানে আপনি এই উত্তরটি 3 বছর পরে উত্তর দিয়েছিলেন তবে এটি সম্ভবত আরও ভাল।
— রে
4
@ xckpd7 হ্যাঁ, তবে আমি আজ এটি গুগল করেছিলাম এবং সবে এই উত্তরটি পেয়েছি। তাই কেবল অপের পক্ষে নয়, এটি সকলের জন্য একটি সংস্থান!
— ম্যাট পার্লিলা
4
@ ম্যাটপ্যারিলা আমি ওপি, এবং আপনি যদি লক্ষ্য করেন তবে আমি মন্তব্যটি করার আগে আমি উত্তরটি পরিবর্তন করে ফেললাম one
— রে
10
আপনি যদি এটি কেন্দ্রীভূত বা ডানদিকে প্রান্তীকৃত পাঠ্যে ব্যবহার করে থাকেন তবে আমি অ্যানিমেশন চলাকালীন আপনার পাঠ্য স্থানান্তর করতে না চাইলে এর একটি প্রাথমিক margin-right(বা প্যাডিং?) যুক্ত 20pxকরার এবং এটি অ্যানিমেট করার পরামর্শ দেব 0px।
— কিমবল
1emপরিবর্তে 20pxএই উত্তরে সিএসএসের জন্য আরও ভাল কাজ করতে পারে
— জীবন তখর
56

আপনি animation-delay propertyপ্রতিটি উপবৃত্তাকার অক্ষর এবং সময় ব্যবহার করার চেষ্টা করতে পারেন । এই ক্ষেত্রে আমি প্রতিটি উপবৃত্তাকার অক্ষর <span class>রেখেছি যাতে আমি সেগুলি পৃথকভাবে প্রাণবন্ত করতে পারি।

আমি একটি ডেমো তৈরি করেছি , যা নিখুঁত নয়, তবে এটি অন্তত আমার অর্থটি বোঝায় :)

আমার উদাহরণ থেকে কোড:

এইচটিএমএল

Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>​

সিএসএস

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

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

@keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
— ক্রিস্টোফার ভিল্যান্ডার
সূত্র
আমি এই ধারণাটি পছন্দ করি এবং "মার্চিং এলিপিসগুলি
— টড দাম
এটি (?) কাজ করে না, তাই আমি প্রদর্শন যুক্ত করেছি: ইনলাইন; এবং তারপর বিন্দু এটি কি এইভাবে কাজ করার জন্য বোঝানো হয়েছিল? jsfiddle.net/cRLMw/3
— ক্রিস্টোফার
4
দুঃখিত @ খ্রিস্টোফার - আমার আপডেট হওয়া ফিডলটি সংরক্ষণ করতে ভুলে গেছেন। এখানে এটি আবার: jsfiddle.net/toddwprice/cRLMw/8 এছাড়াও, আমি স্রেফ পড়েছি এমন একটি নিবন্ধ যা কিছু আকর্ষণীয় সিএসএস অ্যানিমেশন রয়েছে: tympanus.net/ টিউটোরিয়ালস
— টোডের দাম
ফায়ারফক্স ব্যবহার করে আমি এটিকে টেনে আনতে পারি না যদি আমি কেবল একটি শটে ছবিটি ক্লিক করে টেনে আনি। তবে আমি যদি প্রথমে চিত্রটিতে ক্লিক করি এবং তারপরে ক্লিক করে টেনে আনি তবে আমাকে টেনে আনতে বাধা দেওয়া হচ্ছে না।
— স্যাম রুয়েবি
4
আমি <i> ট্যাগগুলি ব্যবহার করার জন্য এইচটিএমএল এবং সিএসএসকে সামান্য সামান্য টুইট করেছি
— অ্যাডাম
32

এমনকি আরও সহজ সমাধান, বেশ ভাল কাজ করে!

<style>
    .loading:after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }

    @keyframes dotty {
        0%   { content: ''; }
        25%  { content: '.'; }
        50%  { content: '..'; }
        75%  { content: '...'; }
        100% { content: ''; }
    }
</style>
<div class="loading">Loading</div>

কিছু বিন্দু গোপন না করে কেবল অ্যানিমেশন দিয়ে সামগ্রী সম্পাদনা করা হয়েছে ...

ডেমো এখানে: https://jsfiddle.net/f6vhway2/1/

সম্পাদনা: অ্যানিমেটেবল সম্পত্তি নয় এটি উল্লেখ করার জন্য @ ব্র্যাডকোলিন্সকে ধন্যবাদ content।

https://www.w3.org/TR/css3-transitions/#animatable-css

সুতরাং এটি একটি ওয়েবকিট / ব্লিঙ্ক / ইলেক্ট্রন কেবলমাত্র সমাধান। (তবে এটি বর্তমান এফএফ সংস্করণগুলিতেও কাজ করে)

— কোডব্রেয়ার
সূত্র
আমি গত সপ্তাহে এই থ্রেডটি দেখছিলাম। খুব সহজ উত্তর!
— r8n5n
4
অ্যানিমেট করার জন্য +1 content। এমনকি অ্যানিমেশন ছন্দ পেতে আপনার একটি steps(1)অতিরিক্ত কী ফ্রেম ব্যবহার এবং সংজ্ঞা দেওয়া উচিত । পদক্ষেপ ফাংশন কী ফ্রেমগুলির মধ্যে ধাপের সংখ্যা নির্ধারণ করে এবং যেহেতু আমরা প্রতিটি ফ্রেম নির্দিষ্ট করে দিই আমরা কেবল তাদের মধ্যে একটি পদক্ষেপ চাই। codepen.io/anon/pen/VmEdXj
— জেফ ক্যামেরা
যদিও আমি এই সমাধানটির কমনীয়তা পছন্দ করি, তবে এটি লক্ষ্য করা উচিত যে আইই 11 এবং (এই লেখা হিসাবে) ফায়ারফক্স contentসম্পত্তিটি অ্যানিমেটেটিং সমর্থন করে না । (এজ সম্পর্কে জানেন না))
— ব্র্যাড কলিন্স
@ ব্র্যাডকোলিনস এর জন্য ধন্যবাদ! আমি আমার উত্তর সম্পাদনা করেছি!
— কোডব্রেয়ার
15

সংক্ষিপ্ত উত্তরটি "সত্যই নয়"। যাইহোক, আপনি অ্যানিমেটিক প্রস্থ এবং ওভারফ্লো লুকানো সহ চারপাশে খেলতে পারেন এবং সম্ভবত "যথেষ্ট কাছাকাছি" এমন একটি প্রভাব পান। (নীচে কোড কেবল ফায়ারফক্সের জন্য তৈরি, প্রয়োজন অনুসারে বিক্রেতা উপসর্গ যোগ করুন)।

এইচটিএমএল

<div class="loading">Loading</div>

সিএসএস

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

ডেমো: http://jsfiddle.net/MDzsR/1/

সম্পাদনা করুন

ক্রোমের সিউডো-এলিমেন্টটি অ্যানিমেট করার ক্ষেত্রে সমস্যা রয়েছে বলে মনে হয়। একটি সহজ সমাধান হ'ল উপবৃত্তিকে তার নিজস্ব উপাদানগুলিতে মোড়ানো। পরীক্ষা করে দেখুন http://jsfiddle.net/MDzsR/4/

— xec
সূত্র
ক্রোমিয়ামে কাজ করছেন না (হ্যাঁ, আমি বিক্রেতা-উপসর্গটি -webkitথেকে পরিবর্তন করেছি -moz)।
— ডেভিড
@ ডেভিড থমাস আপনি ঠিক বলেছেন - ক্রোমে এখন পরীক্ষিত এবং মনে হচ্ছে এটিতে ছদ্ম উপাদানটি রয়েছে। আপনি উপবৃত্তিকে তার নিজস্ব উপাদানটিতে গুটিয়ে
— xec
4
সত্যিই দুর্দান্ত সমাধান, এবং আমি যে ফায়ারফক্স ওএস অ্যাপ্লিকেশনটি তৈরি করছি তার জন্য ঠিক নিখুঁত। এটি কিছুটা সামান্য টুইট করেছেন: jsfiddle.net/feklee/x69uN
— ফিকলি
এখানে Chrome- এ কাজ করে এমন একটি উন্নত সংস্করণ রয়েছে, পাশাপাশি নন-বাম প্রান্তিককরণ উপাদানগুলির সাথে সঠিকভাবে কাজ করে (প্রস্থটি পরিবর্তন করে না)। এছাড়াও, এটি প্রতিটি বিন্দু একটানা প্রদর্শন করে, এই স্লাইডিংটি প্রকাশ না করে নিদর্শনগুলি ছাড়াই: jsfiddle.net/fze2qxsv
— আয়লা সেকুরা
@AaylaSecura দ্য গৃহীত উত্তর পদক্ষেপ ব্যবহার করে একটি ক্লিনার সমাধান পরিবর্তে রয়েছে stackoverflow.com/a/28074607/833146
— xec
3

দেরী সংযোজন তবে আমি এটি করার একটি উপায় খুঁজে পেয়েছি যা কেন্দ্রিক পাঠ্যকে সমর্থন করে।

<element>:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}
— আনন-ই-মাউস
সূত্র
3

আপনি প্রাণবন্ত করতে পারেন clip(বা clip-pathআপনার যদি আইই সমর্থন প্রয়োজন না হয় তবে আরও ভাল ) 

div {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  display: inline-block;
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}
<div>Loading</div>
স্নিপেট প্রসারিত করুন

— জাকব ই
সূত্র
1

আচ্ছা আসলে এটি করার একটি খাঁটি সিএসএস উপায় আছে।

আমি সিএসএস ট্রিকস থেকে উদাহরণ পেয়েছি, তবে এটি ইন্টারনেট এক্সপ্লোরারে সমর্থন করার জন্যও তৈরি করেছি (আমি এটি 10+ তে পরীক্ষা করেছি)।

ডেমোটি দেখুন : http://jsfiddle.net/Roobyx/AT6v6/2/

এইচটিএমএল:

<h4 id="searching-ellipsis"> Searching
    <span>.</span>
    <span>.</span>
    <span>.</span>
</h4>

সিএসএস:

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-o-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
#searching-ellipsis span {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: opacity;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: opacity;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  -o-animation-delay: 100ms;
  animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  animation-delay: 300ms;
}
— শ্রীদেব
সূত্র
আপনি মজিলা-নির্দিষ্ট এবং ওয়েবকিট-নির্দিষ্ট কীফ্রেমে কেবল মালিকানাধীন আইই-ফিল্টার যুক্ত করছেন। ইতিমধ্যে গৃহীত সমাধানের তুলনায় এটি কীভাবে উন্নতি হয়? এমনকি এটি একই সমস্যা রয়েছে (4 এবং 5 ফ্রেমে কেবল দুটি শেষ এবং খুব শেষ বিন্দু যথাক্রমে দৃশ্যমান, যথাক্রমে, প্রশ্নটিতে বর্ণিত যা বিপরীতে 3 টি পুনরাবৃত্তি রাজ্য রয়েছে, 5 নয়)
— xec
প্রশ্নটি লোডিং ডট তৈরির বিষয়ে, এবং একটি নিকটবর্তী উদাহরণ রয়েছে, বাধ্যতামূলক নয়। আমি যা যুক্ত করেছি তা হল উপসর্গ, সুতরাং আইই এটি আরও ভালভাবে সনাক্ত করতে এবং এটি প্রদর্শিত করতে পারে।
— শ্রীদেব
4
-webkit-keyframesকেবলমাত্র ওয়েবকিটের ক্ষেত্রে প্রযোজ্য হবে এবং আপনার ভিতরে কেবলমাত্র আইই-কোড রয়েছে। এই কোডটি স্থান নষ্ট ছাড়া কিছুই করে না।
— xec
0

খাঁটি সিএসএস https://jsfiddle.net/pduc6jx5/1/ এর সাথে আমার সমাধানটি এখানে ব্যাখ্যা করা হয়েছে: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

scss



.dot1 {
 animation: visibility 3s linear infinite;
}

@keyframes visibility {
 0% {
 opacity: 1;
 }
 65% {
 opacity: 1;
 }
 66% {
 opacity: 0;
 }
 100% {
 opacity: 0;
 }
}

.dot2 {
 animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
 0% {
  opacity: 0;
 }
 21% {
  opacity: 0;
 }
 22% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

.dot3 {
 animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
 0% {
  opacity: 0;
 }
 43% {
  opacity: 0;
 }
 44% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

এইচটিএমএল

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
— রেপো
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.