I need to stop animation on hover for the following Codepen project.
I though that adding
.photo:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
could be enough, but it works only for visible image while for other three animation continues in background.
how can I solve?
Thanks for reading
You should use the :hover pseudo class on .container instead, then pause the animation on all of .photo
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round 16s infinite;
opacity: 0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(4) {
animation-delay: 0s;
}
.container:hover .photo {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
Related
How to cut the slide transition animation time in half?
I want to reduce the delay of animations between slides
css
.container_slider_css {
margin: 50px auto;
width: 1427px;
height: 200px;
overflow: hidden;
position: relative;
}
.photo_slider_css {
position: absolute;
animation: round 9s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 6s;
}
img:nth-child(2) {
animation-delay: 3s;
}
img:nth-child(3) {
animation-delay: 0s;
}
html
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
The slider is built in such a way that each image is animated with a time delay relative to the others. By cutting the overall animation time and delay time in half, we make transitions faster.
.container_slider_css {
margin: 50px auto;
width: 1427px;
height: 200px;
overflow: hidden;
position: relative;
}
.photo_slider_css {
position: absolute;
animation: round 9s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
27% {
opacity: 1;
}
37% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 6s;
}
img:nth-child(2) {
animation-delay: 3s;
}
img:nth-child(3) {
animation-delay: 0s;
}
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
I'm hiding an element which holds text with position absolute since some screen readers won't read it if the opacity is zero. I want to use a fade in animation like the first box, so I used a simple animation function, but I can't get the fade out animation to work. Do you guys know why?
Thanks in advance!
p {
color: red;
}
.card {
position: relative;
width: 100px;
height: 100px;
text-align: center;
border: 2px solid red;
}
.card.using-opacity .text-container {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card.using-opacity:hover .text-container {
opacity: 1;
}
.card.using-position-absolute .text-container {
position: absolute;
top: -9999px;
left: -9999px;
width: 100%;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
.card.using-position-absolute:hover .text-container {
top: 0px;
left: 0px;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<p>This is how it's supposed to work in terms of animation/transition but it's not accessible</p>
<div class="card using-opacity">
<div class="text-container">
<p>Some text</p>
</div>
</div>
<p>This is accessible, but I can't get the mouse out animated</p>
<div class="card using-position-absolute">
<div class="text-container">
<p>Some text</p>
</div>
</div>
My circle animation looks stretched out? How can I make the circle not look elongated in the x axis? It stretches out during the animation and then returns back to normal after the animation has finished.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
Well, you are animating your width from 300% to 100%. Removing this will fix it.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
I need to make progressive bar similar to this:
https://dribbble.com/shots/1664914-Onboarding-Progress-Steps?list=searches&tag=onboarding&offset=31
I have tried till this point: Codepen Link
CSS
body{
background-color: #34495e;
}
.mail{
border: 1px solid #d35400;
border-radius: 50%;
border-width: 50%;
float: left;
background-color: #d35400;
color: white;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #16a085;
}
.navbar-inverse{
background-color: #1abc9c;
}.icon-bar {
width: 90px;
background-color: #555;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
background-color: #34495e;
}
.same{
float: left;
font-size: 32px;
}
.icon-bar a:hover {
color: #1abc9c;
}
.active {
color: #1abc9c !important;
}
.header{
color: white;
background-color: #34495e;
margin-left: 2%;
}
.fs1 {
font-size: 32px;
}
.container{
width: 100%;
}
.progressionbar li{
list-style-type: none;
width: 33.33%;
float: left;
position: relative;
}
.progressionbar li >span{
width: 20%;
height:30%;
border:2px solid transparent;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
padding: 5%;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;
}
.progressionbar li:after{
content: '';
position: absolute;
width: 100%;
height: 6px;
background-color: #9b59b6;
top: 35%;
left: -50%;
z-index: -1;
}
.first{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay:2s;
}
.first{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
.second{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 6s;
}
.second{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
.third{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 8s;
}
.third{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
#-webkit-keyframes example {
from {background-color: white;}
to {background-color: #9b59b6;}
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.progressionbar li:first-child:after{
content: none;
left: -50%;
}
HTML
<html><body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<a style="background-color: #34495e" class="navbar-brand active" href="#"><span class="icon-brand same"></span></a>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
Rupam Verma<b class="caret"></b>
<ul class="dropdown-menu">
<li><h1 class="mail">R</h1><h5>Rupam varma</h5><br><h5 style="float: right;"><a href="https://plus.google.com/u/0/105904544623478465796"> mahi.roops#gmail.com</h5></li>
</ul>
</div>
</nav></a></li></ul></li></ul></div></nav>
<div class="row">
<div class="col-md-12">
<h3 class="header">Menu</h3></div>
<div class="col-md-1">
<div class="icon-bar">
<a class="active" href="#"><span class="icon-circle"></span></a>
<span class="icon-toggle-off"></span></i>
<span class="icon-checklist"></span></div></div>
<div class="col-md-11">
<div class="progressionbar">
<ul class="">
<div class="fs1">
<li><span class="icon-gift first"></span><h3 style="text-align: center">gift</h3></li>
<li><span class="icon-truck2 second"> </span><h3 style="text-align: center;"> car</h3></li>
<li> <span class="icon-profile-male third"></span><h3 style="text-align: center;"> user</h3></li>
</div>
</ul>
</div></div></div></div>
</body>
</html>
I really don't know how to achieve such a thing exactly since This has to be done only through css3 and no JS.
This timer and zoom-in zoom-out is my issue. Also, its not repeating.
Any help would be greatly appreciated, thanks.
Ok so the answer is actually simple for the delays.
FOR THE DELAYS:
You can see a fiddle here showing the solution.
CSS3 got no delay between animation loops, only for the first one. But a quick search on CSS trick show you how to do that.
The idea is to create more keyframes to make the delay.
#-webkit-keyframes example3 {
0% {
transform: scale(1);
opacity: 1;
background-color: white;
}
59% {
transform: scale(1);
opacity: 1;
background-color: white;
}
60% {
transform: scale(0.1);
opacity: 0;
background-color: white;
}
72% {
transform: scale(1.2);
opacity: 1;
}
80% {
transform: scale(1);
background-color: #9b59b6;
}
100% {
transform: scale(1);
background-color: #9b59b6;
}
}
Here is the code for an animation during 10 seconds. You can notice that nothing happens for the 6 first seconds because we want to delay it of 6 seconds each loop (third button for your case).
After that, we do the animation during the time we wnat, here 2secondes, ie 20%, and we let the final state untill 100%.
The 59% - 60% weird stuff happends because you want an abrupt change at the start of the animation. It's not always necessary.
Consequently, your problem is only a basic math problem afterall, just calculate when do you have to wait for each animation etc.. I did it for you for the 3 buttons so you can see the result.
FOR THE PROGRESSIVE BAR :
The strategy should be the same than before. Just create another bar with a background color #9b59b6, and make the width change with the percentage, soemtimes waiting 2sec at a certain width for a "button" animation going on before continuing its way, and the work is done!
In your case, you decided to make the progressive bar with after, and not an absolute one, so it is in two parts etc etc..
What I suggest you is to just create a absolute positionned one with the right background color which will recover the ":after" ones, makes it normal width to 0%, and make it grow with animation just like I explained.
Why didn't I do it ? Well you have the strategy now and I am too lazy to position it perfectly. And it's your work at the end.. It will always be better for you if you practice on the progress bar rather than copy paste my code.
i would go on 2 animation.
one to draw the progress line (as a background)
a second for the poping circle (flex children)
/* keyframes for animation */
#keyframes run {
to {
background-size:10000% 5px
}
}
#keyframes popup {
65% {
transform:scale(1.4)
}
60%, 100% {
background:purple;
transform:scale(1)
}
}
/* call and delay animations */
.progress span {
animation:popup 0.5s forwards;
}
.progress span:nth-child(2){
animation-delay:1.25s;
}
.progress span:nth-child(3){
animation-delay:2.75s;
}
.progress {
animation:run 3s linear forwards;
}
/* styling */
.progress {
background:linear-gradient(to right, purple 1%, white 1%) rgb(52, 73, 94) no-repeat left center; /* to animate via keyframes */
display:flex;
justify-content:space-between;
margin:1em 2em;
background-size: 100% 3px;
}
.progress span {
display:flex;
align-items:center;
justify-content:center;
box-shadow:2px 2px 5px black;
width:80px;
height:80px;
background:white;
border-radius:100%;
color:white;
font-size:30px;
}
body {background:rgb(52, 73, 94)}
<p class="progress">
<span>1</span>
<span>2</span>
<span>3</span>
</p>
pen to play with
I have a sidebar which can be shrinked. On shrinking, only the corresponding logos are visible.
The problem with it is that the shrink/unshrink animation is not right - on unshrinking, when 'ng-hide' is not active (the element is being showed), it gets on to the next line because it cant fit into the available width. And after the with animation is complete, it fits. As you can understand, this is not a good UX.
Here is the demo of my problem:
button{
margin-bottom: 50px;
}
#bar{
background: yellow;
width: 200px;
transition: all 0.5s linear;
}
#bar div{
border: 1px solid red;
}
#bar.shrinked{
width: 50px;
}
#bar div span:first-child{
font-size: 75%;
}
span.menu {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: glowy 0.5s;
-webkit-animation-delay: 0.6s;
animation: glowy 0.5s;
animation-delay: 0.6s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<button ng-click="shrink=!shrink">Toggle Shrinking</button>
<div ng-class='{"shrinked": shrink}' id='bar'>
<div>
<span>logo1</span>
<span ng-hide='shrink' class='menu'>This is a menu.</span>
</div>
<div>
<span>logo2</span>
<span ng-hide='shrink' class='menu'>This is another menu.</span>
</div>
<div>
<span>logo3</span>
<span ng-hide='shrink' class='menu'>And one more menu.</span>
</div>
</div>
</div>
I tried to play with it using opacity animation, but the element is added right away when the ng-hide class is removed. Animating display property is not supported by browsers yet.
How do I fix this?
Just add white-space: nowrap; to your #bar div { … } selector.
button{
margin-bottom: 50px;
}
#bar{
background: yellow;
width: 200px;
transition: all 0.5s linear;
}
#bar div{
border: 1px solid red;
white-space: nowrap;
}
#bar.shrinked{
width: 50px;
}
#bar div span:first-child{
font-size: 75%;
}
span.menu {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: glowy 0.5s;
-webkit-animation-delay: 0.6s;
animation: glowy 0.5s;
animation-delay: 0.6s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes glowy {
from {opacity: 0;}
to {opacity: 1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<button ng-click="shrink=!shrink">Toggle Shrinking</button>
<div ng-class='{"shrinked": shrink}' id='bar'>
<div>
<span>logo1</span>
<span ng-hide='shrink' class='menu'>This is a menu.</span>
</div>
<div>
<span>logo2</span>
<span ng-hide='shrink' class='menu'>This is another menu.</span>
</div>
<div>
<span>logo3</span>
<span ng-hide='shrink' class='menu'>And one more menu.</span>
</div>
</div>
</div>