হৃদয় সিএসএস অ্যানিমেশন পলসিং

Question

আমি কেবল সিএসএস দিয়ে অ্যানিমেটেড হার্টে কাজ করছি।

আমি এটি 2 বার পালস করতে চাই, একটি ছোট বিরতি নিন এবং তারপরে আবার এটি পুনরাবৃত্তি করুন।

আমার এখন যা আছে:

small ==> big ==> small ==> repeat animation

আমি কি জন্য যাচ্ছি:

small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation

আমি এটা কিভাবে করবো?

আমার কোড:

#button{
  width:450px;
  height:450px;
  position:relative;
  top:48px;
  margin:0 auto;
  text-align:center;
  }
#heart img{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  -webkit-transition: opacity 7s ease-in-out;
  -moz-transition: opacity 7s ease-in-out;
  -o-transition: opacity 7s ease-in-out;
  transition: opacity 7s ease-in-out;}

 @keyframes heartFadeInOut {
  0% {
    opacity:1;
  }
  14% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  42% {
    opacity:0;
  }
  70% {
    opacity:0;
  }
}

#heart img.top { 
  animation-name: heartFadeInOut; 
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;

}

<div id="heart" >
  <img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
  <img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>

আরও দেখুন এই বেহালার ।

Comments

প্রশ্নটিতে সংহত স্ট্যাক স্নিপেটের পরিবর্তে আপনি jsfiddle ব্যবহার করার কোনও কারণ আছে কি? আমি যতদূর দেখতে পাচ্ছি স্ট্যাক স্নিপেট আপনার উদাহরণের জন্য দুর্দান্ত কাজ করে।

— বাকুরিউ

Answer 1

আপনি বিরতি অ্যানিমেশনে অন্তর্ভুক্ত করতে পারেন। তাই ভালো:

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

কার্যকারী উদাহরণ: https://jsfiddle.net/t7f97kf4/

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

div
{
  background-color: red;
  width: 50px;
  height: 50px;
  animation: heartbeat 1s infinite;
}

<div>
Heart
</div>

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

খাঁটি সিএসএস হার্টের আকারের সাথে কাজ করার উদাহরণ: https://jsfiddle.net/qLfg2mrd/

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75);
  }
  
  20%
  {
    transform: scale( 1);
  }
  
  40%
  {
    transform: scale( .75);
  }
  
  60%
  {
    transform: scale( 1);
  }
  80% {
    transform: scale( .75);
  }
  
  100%
  {
    transform: scale( .75);
  }
}

#heart
{
  position: relative;
  width: 100px;
  height: 90px;
  animation: heartbeat 1s infinite;
}

#heart:before,
#heart:after
{
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after
{
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div id="heart"></div>

Comments

@ ফার্নান্দোসুজা আপনি চিত্র ছাড়াই CSS হৃদয়ও তৈরি করতে পারেন - jsfiddle.net/qLfg2mrd

— বেনামে

@ বেনামে এর জন্য আপনাকে ধন্যবাদ। আমি আমার উত্তরে আপনার লিঙ্ক যুক্ত করেছি।

— Rein

আমি সেই ফিডল বুকমার্ক করছি! এটি করার দুর্দান্ত উপায়।

— ডেভিড উইলকিনসন

@ ডেভিড উইলকিনসন এটিও বুকমার্ক করুন :) - সিএসএস- কৌশলসমূহ / উদাহরণস্বরূপ / শ্যাপসফিসএসএস :)

— বেনামে

আপনার মানে,? চরিত্র? এটা সহজ, ঠিক আছে ♥। সমস্ত transformএস এর প্রয়োজন নেই ।

— ইসমাইল মিগুয়েল

Answer 2

2 বার পালস করুন, একটি ছোট বিরতি নিন এবং তারপরে এটি আবার করুন

এটা চেষ্টা কর. অ্যানিমেশন সহ যাওয়া opacityখারাপ পছন্দ। transform: scale()কাজ করবে

.heart:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: 'icons';
  font-size: 21px;
  text-indent: 0;
  font-variant: normal;
  line-height: 21px;
}
.heart {
  position: relative;
  width: 500px;
  overflow: inherit;
  margin: 50px auto;
  list-style: none;
  -webkit-animation: animateHeart 2.5s infinite;
  animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  width: 120px;
    height: 200px;
    background: red;
    border-radius: 100px 100px 0 0;
  -webkit-transform: rotate(-45deg) translateZ(0);
  transform: rotate(-45deg) translateZ(0);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.heart:after {
  left: 26%;
  -webkit-transform: rotate(45deg) translateZ(0);
  transform: rotate(45deg) translateZ(0);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
@-webkit-keyframes animateHeart {
  0% {
    -webkit-transform: scale(0.8);
  }
  5% {
    -webkit-transform: scale(0.9);
  }
  10% {
    -webkit-transform: scale(0.8);
  }
  15% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.8);
  }
}
@keyframes animateHeart {
  0% {
    transform: scale(0.8);
  }
  5% {
    transform: scale(0.9);
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
span {
  font-family: 'Cantora One', sans-serif;
  font-size: 64px;
  position: absolute;
  top: 165px;
}

<div class="heart">
</div>

Comments

চূড়ান্ত প্রকল্পে আমাকে খাঁটি সিএসএসের পরিবর্তে চিত্রগুলি ব্যবহার করতে হবে। কিন্তু ধন্যবাদ! আমি আপনার অ্যানিমেশনের সময় ব্যবহার করতে পারি, যা নিখুঁত!

— ফার্নান্দো সূজা

কোন পার্থক্য না। আপনি এইভাবে চিত্র স্কেল করতে পারেন। শুধু একবার চেষ্টা করুন :)

— জিনু কুরিয়ান

আমি কি এইভাবে বিকল্প চিত্রগুলি বা পটভূমি চিত্র পরিবর্তন করতে পারি?

— ফার্নান্দো সুজা

পুনঃটুইট একবার চেষ্টা করে দেখ. আপনার যদি কোনও সমস্যা হয় তবে আমি আপনাকে সহায়তা করব।

— জিনু কুরিয়ান

আমি চেষ্টা করছি, তবে প্রথমে কিছু কাঠামো হৃৎপিণ্ডের পাঠ্য হিসাবে পরিবর্তিত হচ্ছে এবং এটি অবশ্যই একই আকারে থাকা উচিত।

— ফার্নান্দো সুজা

Answer 3

আমি কেতানের উত্তর পছন্দ করি তবে হৃদয় অ্যানিমেশনটিকে আরও বাস্তবসম্মত করতে আমি আরও উন্নত করতে চাই।

• হার্ট যখন ধড়ফড় করে তখন আকারে দ্বিগুণ হয় না। আকারে 10% পরিবর্তন আমার কাছে আরও ভাল দেখাচ্ছে।
• আমি এটি বড় এবং ছোট উভয় পেতে পছন্দ
• যখন এটি পুরোপুরি চলতে বন্ধ করে দেয় তখন তা আমার কাছে মৃত মনে হয়। এমনকি যখন এটি মারধর করে না, তখন এটির কিছুটা প্রসারিত বা চুক্তি করা দরকার
• আমি "বিকল্প দিকনির্দেশ" কোডটি সরিয়েছি যাতে এটি প্রতিটি সময় একই পথে চলে
• আমার স্পষ্টতই হার্টের শুরু শেষ এবং স্বাভাবিক স্কেল (1) এবং ক্রমের মাঝখানে অ্যানিমেশন রয়েছে। আমার কাছে এটাই পরিষ্কার মনে হচ্ছে।

#heart img{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
 }

 @keyframes heartFadeInOut {
  0% {transform: scale(1);}
  25% {transform: scale(.97);}
  35% {transform: scale(.9);}
  45% {transform: scale(1.1);}
  55% {transform: scale(.9);}
  65% {transform: scale(1.1);}
  75% {transform: scale(1.03);}
  100% {transform: scale(1);}
}

#heart img.bottom { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

<div id="heart" >
  <img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>

Answer 4

বিভিন্ন মন্তব্য এবং ব্যবহারের উপর ভিত্তি করে ♥ আমরা এটি পেয়ে যাব:

body {
  font-size: 40pt;
  color: red;
}
@keyframes heartbeat {
  0% {
    font-size: .75em;
  }
  20% {
    font-size: 1em;
  }
  40% {
    font-size: .75em;
  }
  60% {
    font-size: 1em;
  }
  80% {
    font-size: .75em;
  }
  100% {
    font-size: .75em;
  }
}
div {
  animation: heartbeat 1s infinite;
}

<div>
  &hearts;
</div>

Answer 5

body{
  margin: 0;
  padding: 0;
  background: #1f1f1f;
}

body:before
{
  position: absolute;
  content: '';
  left: 50%;
  width: 50%;
  height: 100%;
  background: rgba(0,0,0,.2);

}

.center
{
  position: absolute;
  top:50%;
  left: 50%;
  background: #1f1f1f;
  transform: translate(-50%,-50%);
  padding: 100px;
  border: 5px solid white;
  border-radius: 100%;
  box-shadow:20px 20px 45px rgba(0,0,0,.4);
  z-index: 1;
  overflow: hidden;
}
.heart
{
  position: relative;
  width: 100px;
  height: 100px;
  background:#ff0036;
  transform: rotate(45deg) translate(10px,10px);
  animation: ani 1s linear infinite;
}
.heart:before
{
  content: '';
  width: 100%;
  height: 100%;
  background: #ff0036;
  position: absolute;
  top:-50%;
  left:0;
  border-radius: 50%;
}
.heart:after
{
  content:'';
  width: 100%;
  height: 100%;
  background: #ff0036;
  position: absolute;
  bottom:0;
  right:50%;
  border-radius: 50%;
}
.center:before
{
  content: '';
  position: absolute;
  top:0;
  left:-50%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}

@keyframes ani{
  0%{
    transform: rotate(45deg) translate(10px,10px) scale(1);
  }
  25%{
    transform: rotate(45deg) translate(10px,10px) scale(1);
  }
  30%{
    transform: rotate(45deg) translate(10px,10px) scale(1.4);
  }
  50%{
    transform: rotate(45deg) translate(10px,10px) scale(1.2);
  }
  70%{
    transform: rotate(45deg) translate(10px,10px) scale(1.4);
  }
  90%{
    transform: rotate(45deg) translate(10px,10px) scale(1);
  }
  100%{
    transform: rotate(45deg) translate(10px,10px) scale(1);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HeartBeat Animation</title>
    <link rel="stylesheet" href="Style.css" type="text/css">
  </head>
  <body>
    <div class="center">
      <div class="heart">
        
      </div>
    </div>
  </body>
</html>

আউটপুট

আরও জন্য: হার্ট বিট অ্যানিমেশন

Answer 6

আমি মনে করি আপনি নিজের ইমেজ অ্যানিমেশনের জন্য এটিই চান। শীর্ষ চিত্রের প্রয়োজন নেই। শুধু নীচে ব্যবহার করুন।

#button{
  width:450px;
  height:450px;
  position:relative;
  top:48px;
  margin:0 auto;
  text-align:center;
  }
#heart img{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
 }

 @keyframes heartFadeInOut {
  0%
  {    transform: scale( .5 );  }
  20%
  {    transform: scale( 1 );  }
  40%
  {    transform: scale( .5 );  }
  60%
  {    transform: scale( 1 );  }
  80%
  {    transform: scale( .5 );  }
  100%
  {    transform: scale( .5 );  }
}

#heart img.bottom { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation-direction: alternate;

}

<div id="heart" >
  <img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>

Comments

আপনার হৃদয়ের ক্রোমে হালকা বাত আছে?

@ লেগোস্টোরমাট্রোপ্র তাই এটি কেবল আমারই নয়। ক্রোম কেন? কেন?

— জ্যাকা

আমি নিশ্চিত নই, এটি কার্ডিয়াক সিম্ফাইসিস সাইনাস হতে পারে তবে আপনি আরও ভাল নির্ণয়ের জন্য সিএসএস বিশেষজ্ঞের সাথে পরীক্ষা করতে চান।

Answer 7

আমি যে প্রকল্পে কাজ করছি তার জন্য আমার এটি দরকার ছিল। আমি এটিকে যতটা সম্ভব বাস্তবসম্মত দেখানোর চেষ্টা করছিলাম এবং এটিই আমি সামনে এলাম।

@keyframes heartbeat {
    0% {
        transform: scale( .95 );
    }

    20% {
        transform: scale( .97 );
    }

    30% {
        transform: scale( .95 );
    }

    40% {
        transform: scale( 1 );
    }

    100% {
        transform: scale( .95 );
    }
}

animation: heartbeat 1s infinite;