I want to stagger the fade-in animations of images in a gallery. I've boiled down my problem to the attached snippet.
Not sure whether the snippets here allow for SCSS but in any case, I think my mistake is in the CSS selector where I set the animation-delay.
#keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.masonry {
display: flex;
}
.item {
animation: FadeIn 0.5s linear;
}
#for $i from 1 through 20 {
.item > .cld-image > img:nth-child(#{$i}) {
animation-delay: 1000ms * $i;
}
}
<div class="masonry">
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
</div>
I think my mistake is in the CSS selector where I set the animation-delay.
Your thoughts are correct! The selector where you add the animation-delay is incorrect, since there's no animation added to the actual <img> tags(logically).
To fix this, you have to either add the animation-delay to the .item class, or add the animation itself to the <img> tags.
Related
I want to move img to top 4px when parent tag a is hovered. So I have something like this :
<a href="">
<img src="GitHub.png" alt="GitHub" />
</a>
And my CSS :
a:hover > img {
position: relative;
bottom: 4px;
}
When I apply transition to a or img, it doesn't move smoothly.
What's my mistake?
Use transform instead of bottom.
a:hover > img {
position: relative;
transform: translateY(-4px);
}
img {
transition: transform 1s;
}
<a href="">
<img src="https://placehold.it/50" alt="GitHub" />
</a>
You could also do it with keyframes:
.first:hover > img {
position: relative;
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes move {
from {top: 0;}
to {top: 4px;}
}
<div class="body" style="position: relative;">
<a class="first" href="">
<img src="https://dummyimage.com/100"/>
</a>
</div>
For the transition effect to work, You should apply the transition on the selector and declare what the property you want to transitions original state in that selector. The final state of the transitioned property should be declared in the pseudo class.
The reason you were having issues is because you were declaring the tags position: relative only when hovered and never stated what the default state of the tag should be.
I recommend you check out this Codecademy lesson on transitions to get a better understanding. For a practical example here is a w3schools link that shows off the effect.
Finally for your code here is an example of what will work!
a > img {
position: relative;
top: 0;
transition: top 1s;
}
a:hover > img {
top: 4px;
}
I want to change the color of text with Css-animations multiple times infinitely.
<div class="footer-
widget-area">
<div class="col-md-3 col-sm-
6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">
<div class="textwidget"><p>.
<a href="http://4309.co.uk
/contact/">Contact</a></p>
</div>
</div>
Css
#text-4 a{ animation: change
1s forwards; animation-
delay: 11s;}
#keyframes change
{from{color:white;} to
{color:
blue;} to{color:yellow;}}
This doesn't work as second color yellowoverides first color blue.
Use with percentage like:
#text-4 a{ animation: change
3s forwards infinite; animation-delay: 5s;}
#keyframes change
{
0% { color: blue; }
25% { color: orange; }
50% { color: yellow; }
75% { color: black; }
100% { color: red; }
}
<div class="footer-
widget-area">
<div class="col-md-3 col-sm-
6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">
<div class="textwidget"><p>.
<a href="http://4309.co.uk
/contact/">Contact</a></p>
</div>
</div>
I have an accordion.. while opening it is opening slowly but while closing its closing very fasting within fraction of ms range. Kindly help me to change the animation while closing.
I am here by sharing my HTML and css code,
Please help.
HTML Code:
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div layout="row" class="row listing-element tracking-listing">
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Car</div>
</div>
</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Bike</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Auto</div>
</div>
</div>
</accordion-group>
</accordion>
CSS:
#wd-faq .outer .panel-collapse .panel-body {
margin-top: 18px;
border: 0;
background-color: blue;
-webkit-animation:all 150ms;
overflow:hidden;
}
#keyframes all {
0% {
height:0px;
}
100% {
height:auto;
}
}
The CSS i pasted above is of opening accordion. Help me for Closing accordion.
Thanks in Advance.
Try like this in yout HTML Code
HTML CODE
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div class="slideInDown">
</div>
<accordion-heading>
<accordion>
and change your CSS with these codes
CSS
.slideInDown{
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 80ms;
animation-duration: 80ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
I dont know it satisfies your requirement properly or not but you can try once.
I think the main problem is with the animation. It's not the best choice for the toggle animation. If you check your animation you can see there it is only an open animation. You can use two animation or only one and make it reverse direction with css but it would be pain in the ass and also produce a terrible code. But you can use transition which is works perfectly and it is looks more better and produce less code.
Here is the code:
CSS:
There is an .accordion class which is 0 at the beginning and I have a transition which 2s long. I use max-height because auto won't work and it will be as high as the content when it's opened.
.accordion {
background-color: lightgreen;
max-height: 0;
overflow: hidden;
transition: max-height 2s;
}
.accordion.open {
max-height: 200px;
}
HTML:
In the HTML i have a click event on a button which open the div. It has a toggle function. On the accordion div there is an ngClass with the open class and with an isOpen boolean.
<button (click)="toggle()">OPEN</button>
<div class="accordion" [ngClass]="{'open': isOpen}">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
TypeScript code:
This is a simple code for checking the state of the accordion.
isOpen:boolean = false;
public toggle() {
if(this.isOpen) {
this.isOpen = false;
}else {
this.isOpen = true;
}
}
And that's all. I hope you understand my English :D.
And here is a WORKING PLUNK.
I have a div that is acting as a navigation bar for my webpage. The div consists of a horizontal unordered list where each list item is an image. The unordered list has a fade-in animation on load, and each list item has a hover effect where it grows in scale upon mouseover.
For some reason, whenever I load the page, either in Dreamweaver's live view screen or as a preview on the web browser, the div starts a few pixels off the position to the right, and once the fade-in animation is completed, it 'twitches' back to its proper position.
Its very frustrating because this is not complicated code. I only have the Source Code page and its CSS stylesheet loaded in the project.
This is all the HTML code related to the Navigation bar:
<div class="Nav">
<ul>
<li>
<img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/>
</li>
<li>
<img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/>
</li>
<li id="josh">
<img src="img/joshforsite.png" width="300px" height="300px" alt="About Me"><br/>
</li>
<li>
<img src="icons/designicon.png" width="120px" height="120px" alt="Design"><br/>
</li>
<li>
<img src="icons/brandicon.png" width="120px" height="120px" alt="Branding"><br/>
</li>
</ul>
</div>
...and this is all the CSS code related to the Navigation bar:
.Nav {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
position: absolute;
width: 100%;
padding-top: 16%;
white-space: nowrap;
.Nav li {
vertical-align: middle;
display: inline-block;
padding-right: 4%;
opacity: 1;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
transition: all .3s ease-in-out;
.Nav li:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
#keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
#-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
Again, I am a beginner at HTML & CSS so I don't how much of a mess the coding is.
Here is a link to a YouTube video I uploaded showing the problem. It also shows towards the end a second issue I'm having whereby the growing hover effect is bugged. Any help with this would be appreciated.
Thank you!
Change the padding-right on .Nav li to a px based solution instead of a percentage and it should eliminate that jump left.
Also, you're missing your closing curly brackets for each block.
You are using images with alternative text. The glitching is probably caused by loading the images. Try to preload the images with javascript and it might help.
I would like to have the images in my slideshow to be clickable links, but just putting tags around it doesn't work:
<img class='photo' src="Images/Red.jpeg" alt="">
It probably has something to do with the animation, is there a way around this?
Css:
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
-webkit-animation: round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
#-webkit-keyframes round {
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}
HTML:
<div id="slideshow">
<img class='photo' src="Images/Red.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
<img class='photo' src="Images/White.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
</div>
Wrap images with a and add class photo to a links. Remove class photo from images. Try that :)
Try:
Wrap all images in <a> tags, each one with a "photolink" class or any name you want.
#slideshow a.photolink { display: block; }
Try changing "position: absolute" in .photo to "position: relative".