Develop Reference

Using transform and color properties in CSS animation

I am making a project in which there is a text(which is "happy birthday to you") and a heart. At starting, the heart drops and hit the first word, then the second, and so on. When the heart hit the text, it should turn yellow. And when the heart hit the last word, after 1 or 2 seconds the text fades and reappears with the previous color.
I have done with the transform property but messed up with the colors. Please suggest me some solutions.
.main .text{
font-size: 50px;
font-family: cursive;
color: white;
animation: opacity-control 3.5s infinite;
}
.main .text span{
display: inline-block;
animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;
}
.main .text span:nth-child(1){
animation-delay: 0.25s;
}
.main .text span:nth-child(2){
animation-delay: 0.5s;
}
.main .text span:nth-child(3){
animation-delay: 0.75s;
}
.main .text span:nth-child(4){
animation-delay: 1s;
}
.main .text span:nth-child(5){
animation-delay: 1.25s;
}
#keyframes text-jump{
0%{
transform: translateY(0);
color: yellow;
}
10%{
transform: translateY(20px);
color: yellow;
}
15%{
transform: translateY(0);
color: yellow;
}
100%{
color: yellow;
}
}
#keyframes opacity-control{
0%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes color-change{
0%{
}
40%{
color: yellow;
}
95%{
color: yellow;
}
100%{
color: white;
}
}

You don't need 2 separate animations to change the text color and make it 'jump'.
Combine both of them, remove the 100% step (not needed), and change the 15% step so that it changes the text back to white after it animates.
#keyframes color-jump {
0% {
transform: translateY(0);
color: yellow;
}
10% {
transform: translateY(20px);
color: yellow;
}
15% {
transform: translateY(0);
color: white;
}
}
Change this to only use the one new animation:
.main .text span {
display: inline-block;
animation: color-jump 3.5s ease-in-out infinite;
}

stop animation and align all circles on same line on hover

I have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>

Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</div>

CSS Animation width from right to left and height from bottom to top

I am trying to solve problem of expanding width of div from right to left and height of different container from bottom to top. I am trying to create CSS animation that will rotate in square and imitate borders of here is link to my CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100 if that's help.
Here is my HTML .container is a main wrapper .circle is one animation line1-line4 are borders of square that I'm trying to animate.
<div class="container">
<div class="circle "></div>
<div class="line1 "></div>
<div class="line2 "></div>
<div class="line3 "></div>
<div class="line4 "></div>
</div>
Here is my CSS
body {
margin: 0 auto;
}
.container {
position:relative;
margin: 50px auto;
width: 800px;
height:800px;
border:1px solid #000;
}
.circle {
display:inline-block;
width: 25px;
height: 25px;
border-radius:50%;
position: absolute;
top:100px;
left:100px;
background:#000;
animation: myframes 4s ease-in-out 0s infinite;
/* animation-name: myanimation;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-delay: 0s;
animaiton-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running; */
}
.line1 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:105px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:205px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:205px;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:105px;
background:green;
animation: squerframe4 2s ease-in-out 3s infinite;
}
#Keyframes squerframe
{
0% { width:15px; opacity: 1; }
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe2
{
0% { height:15px; opacity: 1; }
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#Keyframes squerframe3
{
0% { width:115px; opacity: 0;}
50% { width:115px; }
100%{ width:15px; opacity: 1; }
}
#Keyframes squerframe3
{
0% { width:15px; opacity: 1;}
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe4
{
0% { height:15px; opacity: 1;}
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#keyframes myframes
{
0% { top:100px; left:100px; }
25% { top:100px; left:200px; }
50% { top:200px; left:200px; }
75% { top:200px; left:100px; }
100% { top:100px; left:100px; }
}
Please direct me where to find solutions or point me different approach to this problem. Thank You!

The problem here is that you need for line3 to have an absolute right, so that when the width changes, it will stretch to the left.
Also, line 4, should have an absolute bottom so it will stretch up.
I suggest you add a container or change the dimensions of the current div.container ( as i did in the example ) for the four lines, and use the 4 lines as the extremes of that container.
Here is your example modified as a point of reference on how to continue:
https://codepen.io/anon/pen/MbRvGM?editors=0100
body {
margin: 0 auto;
}
.container {
position:relative;
margin: 50px auto;
width: 115px;
height:115px;
border:1px solid #000;
}
.circle {
display:inline-block;
width: 25px;
height: 25px;
border-radius:50%;
position: absolute;
top:0px;
left:0px;
background:#000;
animation: myframes 4s ease-in-out 0s infinite;
/* animation-name: myanimation;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-delay: 0s;
animaiton-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running; */
}
.line1 {
height:15px;
width:15px;
position:absolute;
top:0px;
left:0px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:0px;
left:100px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:100px;
right:0px;
float: right;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
left:0px;
bottom: 0;
background:green;
animation: squerframe4 2s ease-in-out 3s infinite;
}
#Keyframes squerframe
{
0% { width:15px; opacity: 1; }
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe2
{
0% { height:15px; opacity: 1; }
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#Keyframes squerframe3
{
0% { width:115px; opacity: 0;}
50% { width:115px; }
100%{ width:15px; opacity: 1; }
}
#Keyframes squerframe3
{
0% { width:15px; opacity: 1;}
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe4
{
0% { height:15px; opacity: 1;}
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#keyframes myframes
{
0% { top:0px; left:0px; }
25% { top:0px; left:100px; }
50% { top:100px; left:100px; }
75% { top:100px; left:0px; }
100% { top:0px; left:0px; }
}

Add additional stylings
animation: squerframe4 2s ease-in-out 3s infinite;
-webkit-animation: squerframe4 2s ease-in-out 3s infinite;
-moz-animation: squerframe4 2s ease-in-out 3s infinite;
and for keyframes
#Keyframes squerframe...
#-webkit-Keyframes squerframe...
#-moz-Keyframes squerframe...

Creating a radial progress bar with css animation on button click

I've had a big problem trying to achieve this. I don't understand how to animate something so that it turns in a circle so I grabbed a working one from Circle Progress Bar and am trying to find a way to make it animate on button click using jquery. I tried using this tutorial but have no idea how to properly incorporate it. Please help. Here is my Fiddle though it doesn't come close to working.
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activatedAfter {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
}
.activated {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}

I changed $('#progress') to $('.progress') in your fiddle since 'progress' is a class and not an ID. Also, I replaced the activatedAfter style with the activated:after and activated:before styles from the example in the link you provided.
Also, I added the jQuery library in the code (it was not included in your fiddle)
Try this
$('#battleButton').click(function() {
$('.progress').addClass('activated activatedAfter');
});
body {
background-color: #000;
}
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activated:after {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:-50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
transform-origin:100% 50%;
z-index:1;
}
.activated:before {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
transform-origin:0% 50%;
z-index:2;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
button {
background-color: rgba(0, 0, 0, 0);
border-color: #81ff14;
color: #81ff14;
border-radius: 10%;
float: right;
margin-right: 100px;
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
<button id="battleButton">Battle</button>

jQuery make animation in pseudo after

I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.

It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle

CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}