I have to make an animation of 5 balls of different colors that move in a wave. I am struggling with the different starting positions of the balls as the instructions say. And the position and color of the first-child goes last in the sequence of 5 balls for some reason.
Use this color palette (Links to an external site.) to style the div elements with the circle class as per the reference above. Each circle should be 50px in diameter.
Implement an animation so that the circles move up 100px, then move back down to their original position. The movement should have a duration of 1 second. Each ball should start the animation at a slightly different point in time so that they appear slightly out of phase. The overall effect is that they appear as an infinite looping ‘wave’.
Here is the HTML
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color:antiquewhite;
animation: circle 1s linear infinite;
float: left;
margin: 5px;
}
.circle:first-child {animation-delay: -0.1s; background: #EF476F}
.circle:nth-child(2) {animation-delay: -0.2s; background: #FFD166;}
.circle:nth-child(3) {animation-delay: -0.4s; background: #06D6A0;}
.circle:nth-child(4) {animation-delay: -0.6s; background: #118AB2;}
.circle:nth-child(5) {animation-delay: -0.8s; background: #073B4C;}
#keyframes circle {
0%, 100% {transform: translateY(0px);}
50% {transform: translateY(100px);}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
</body>
</html>
Your problem is the nth-child(). Your first circle element is actually the second child element in the container, because the first child element is the <h2>.
The nth-child() does not distinct by class so this method won't work.
However, the solution is found in another, more fitting selector nth-of-type(). This selector also can't distinguish by class name, but can by element type.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: antiquewhite;
animation: circle 1s ease-in-out infinite; /* changed it to ease-in-out just for better visual result */
float: left;
margin: 5px;
}
.circle:nth-of-type(1) { animation-delay: -0.1s; background: #EF476F }
.circle:nth-of-type(2) { animation-delay: -0.2s; background: #FFD166; }
.circle:nth-of-type(3) { animation-delay: -0.4s; background: #06D6A0; }
.circle:nth-of-type(4) { animation-delay: -0.6s; background: #118AB2; }
.circle:nth-of-type(5) { animation-delay: -0.8s; background: #073B4C; }
#keyframes circle {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(100px); }
}
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
The selector will find the element with class circle and find the nth of its type - in this case div. If you add another element, like <span class"circle"></span>, it will get the styles of .circle:nth-of-type(1) because this is the first span with this class.
Related
I want to slide each of the children of the container element from right to left with the child elements completing the animation in order of top down.(item 1 completes animation then item 2, item3, etc.) How can I do this if the number of children is unknown?
<div class="container">
<div class="child"> item 1</div>
<div class="child"> item 2</div>
<div class="child"> item 3</div>
<div class="child"> item 4</div>
</div>
I see a lot of guides on sliding from right to left on a single element. However, not seeing a way to slide individual items at various speeds, especially if the number of items is unknown.
If you know the max number of items, you can set animation times for each of the possible elements.
Then you'll need to dynamically add a class to each element. Since the items are dynamically shown, I'm assuming you're using something like map.
items.map((items, itemCount=0)=> {
//code to append class with itemCount++ at end
}
Then in your CSS you can do something like this
.item1 {
animation: 100ms slide-left;
}
.item2 {
animation: 200ms slide-left;
}
.item3 {
animation: 300ms slide-left;
}
#keyframes slide-left {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
Notice how we can use the same animation and just change the timing on each child element to make it slide faster or slower.
first you will have to give every "child" its own class, you have them listed as the same class.
ex. child1, child 2,etc.
I have listed code below that I think is what you are asking.
There is commented out code that will explain what to do :)
Code:
<!doctype html>
<html>
<head>
<title>JavaScript and the Canvas</title>
<style>
/* animate every child*/
/*add an animation delay for each one so they will start one after the other
ex. if one starts at 3s then the next will be delayed by 3s so it starts after it*/
/*if you want the animation to continue almost on a loop add: animation-iteration-count: infinite;*/
.container {
background-color: aquamarine;
height: 500px;
width: 500px;
}
.child1 {
color: blue;
animation-name: move1;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
#keyframes move1 {
0% {
transform: translate(0);
}
50% {
transform: translate(100px);
}
100% {
transform: translate(450px);
}
}
.child2 {
color: blueviolet;
animation-name: move2;
animation-duration: 3s;
animation-delay: 3s;
animation-timing-function: ease-in-out;
}
#keyframes move2 {
0% {
transform: translate(0);
}
50% {
transform: translate(100px);
}
100% {
transform: translate(450px);
}
}
.child3 {
color: brown;
animation-name: move3;
animation-duration: 3s;
animation-delay: 6s;
animation-timing-function: ease-in-out;
}
#keyframes move3 {
0% {
transform: translate(0);
}
50% {
transform: translate(100px);
}
100% {
transform: translate(450px);
}
}
</style>
</head>
<body>
<!--give each child in the container a diffrent class, not the same class-->
<div class="container">
<div class="child1"> item 1</div>
<div class="child2"> item 2</div>
<div class="child3"> item 3</div>
</div>
</body>
</html>
Why does border-radius not work when background is not applied onto the animation.
The border radius only works when a background is applied at 0%-50%-100%. Without the background color the border-radius doesn't work.
I expect the border-radius to change from a square to a circle and then back to a square.
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
background:#41A9F0;
/* apply the animation */
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
50% {
transform: rotate(180deg) scale(2);
/* background: #5ABE8A; */
border-radius: 50%;
}
100% {
transform: rotate(360deg) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Animation Challenge</title>
</head>
<body>
<!-- HINTS
1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
2) Create a keyframe named box.
3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.
Hint: You will need the properties border-radius and transform -->
<div class="square"></div>
</body>
</html>
Without any background color you can't see the animation but it still persist.
Here an example with your animation applied also to a div without background color but with border (to see what happen)
https://jsfiddle.net/cjohm3xb/1/
.square-border {
border:1px solid red;
/* apply the animation */
animation: box 8s linear infinite;
}
I have tested your code in Chrome 75.0.3770.142 and Edge 44.17763.1.0. You have provided a coloured div, so you can see the animation. Try to remove the background and add a child, which can be a text or something else, then you'll see the same effect. If you remove background and all the children, obviously you "will see" an empty animated div, which translates to nothing on screen actually!
I tried playing with keyframes, backgrounds and border radiuses. The page seems to work correctly. Check this stylesheet:
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
/* apply the animation */
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
background: #41A9F0;
border-radius: 0%;
}
10% {
background: green;
border-radius: 50%;
}
25% {
background: blue;
border-radius: 10%;
}
50% {
background: red;
transform: rotate(180deg) scale(2);
border-radius: 30%;
}
100% {
transform: rotate(360deg) scale(0.2);
background: yellow;
border-radius: 0%;
}
}
Remember that percentage values for border radius go from 0 to 50. Anything above 50 is simply 50.
Source: https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9
I you can provide the browser you are using or explain the problem better at least, community could have provided better answers.
Here's my html code
<body>
<div id="b">
<div id="one"><div>
</div>
</div id="a">
</div>
</body>
Heres my css code (I've tried to place "~,+,>" between hover and the element I wish to style but none of those seem to work!
#a:hover #one{
background: white;
-webkit-animation:spin 1s ease-in-out;
-moz-animation:spin 1s ease-in-out;
animation:spin 1s ease-in-out;
animation-iteration-count: infinite;
animation-delay: 1s;
opacity:1;
transition-delay:0s;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(180deg);
transform:rotate(180deg); } }
CSS doesn't allow you to select sibling elements and apply styles to them. If you want to retain the DOM structure the way you have it now, you would need to use Javascript to achieve what you want.
If you are flexible with changing the HTML structure a bit, consider encapsulating "a" and "b" divs inside a container , and apply hover styles for the container rather than "a" (but, this is as good as saying "b.hover")
The + and ~ selectors get the siblings which are after the current node. There is no selector for 'previous sibling'. You need to apply style for such nodes with javascript.
var divA = document.getElementById('a');
divA.addEventListener('mouseover', function() {
document.getElementById('b').children[0].style.backgroundColor = 'green';
});
#one {
background-color: yellow;
}
<div id="b">
This is b
<div id="one">This is one</div>
</div>
<div id="a">This is a
</div>
I'm given the following task,
Actual html which I have: Two images are stacked on top of each other.(below html) when the user hovers on the foreground image, as per the CSS rules opacity will be transitioned to 0 in 4 seconds and this keeps happening in a cycle.
Fiddle
Modification I have to do: Now I have to perform the same for 5 images. I've tried doing the same as below, could not succeed(See second code snippet). Any hints as to how this can be done only using css ? thanks
Fiddle2
<!-- Melting one image into another using CSS3. -->
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
</div>
</body>
</html>
What I've tried
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
#cover img.top1:hover
{ opacity:0; }
#cover img.top2:hover
{ opacity:0; }
#cover img.top3:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
<img class = "top1" src = "jhtp1.png" alt = "Java 8e cover">
<img class = "top2" src = "jhtp2.png" alt = "Java 8e cover">
<img class = "top3" src = "jhtp3.png" alt = "Java 8e cover">
</div>
</body>
</html>
You can do that only in CSS, and applying the styles to the container and the children, whatever this are.
I have set an example using div as children, but you can modify it to whatever you want
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
CSS
.container{
width: 80px;
height: 80px;
position: relative;
}
.container div {
position: absolute;
width: 100%;
height: 100%;
font-size: 60px;
opacity: 0;
}
.container div:nth-child(1) {
background-color: yellow;
opacity: 1;
}
.container:hover div {
-webkit-animation: anim 5s infinite;
animation: anim 5s infinite;
}
.container div:nth-child(2) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.container div:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.container div:nth-child(4) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.container div:nth-child(5) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#-webkit-keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
fiddle
As hovering is a binary process (you're either hovering an element or you're not), I'm afraid this is not possible with CSS only. You write some JS code that will be also triggeren on hover and that will take care of replacing images below and sorting them. However, that seems like an ugly mishmash.
Maybe you could do it using keyframes, but again, you'd need a way to trigger an animation for each image. I'm talking about building a 20s animation for each image and then modifying the opacity value for each in 4 second intervals. But again, seems like too much effort.
So, I'd strongly suggest you write a simple JS image fader that will handle both the image sorting and fade animations at a slight cost of performance.
If you still want to use as much CSS as possible, go with the keyframes, and set a JS listener on the container element which will add a class to each image - that class would trigger the CSS animation for each image. You'll have to repeat the first image and put it at the bottom. The animation would make the 1st image transparent by the second 4, 2nd image by second 8, etc...
I have a CSS carousel that is working great thanks to a great coder on here, but as I am finishing up my project, I cannot make the images or text clickable in the slides. I have wrapped around the img, I have connect it to the text, and I cannot click anything, it just slides on its merry way. Below is the code:
.colorDissolve {
position: relative;
overflow: hidden;
width: 287px;
height: 430px;
background: #000000;
}
.colorDissolve .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.colorDissolve .item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.stars{
height: 220px;
background-color: rgba(11, 11, 44, 0.6);
position: absolute;
margin-left: 120px;
margin-top: -135px;
top:200px;
bottom:200px;
right:100px;
left:220px;
bottom: 143px;
color: #8df4fb;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.space{
position:absolute;
top:100px;
bottom:100px;
left:390px;
color:#c30;
font-size:.9em;
padding:0.5em;
position:absolute;
right:10px;
left:10px;
text-align:right;
color:#fff;
background-color:rgba(0,0,0,0.75);
}
#-webkit-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-moz-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-ms-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
<div class="carousel colorDissolve">
<div class="item">
<a href="star.html">
<img src="images/stars.gif" />
</a>
<span class="stars">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="space.html">
<img src="images/galaxy.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="moon.html">
<img src="images/moons.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="nebula.html">
<img src="images/nebulae.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
</div>
I also have put the link code by the text, around the headers, and there is no link option. I tried the z-index, and it still does not work, and I do not think it should go higher than my nav links, right? Are maybe my nav links somehow messing up my img links? I am not sure what I am missing, I have put the in the span sections as well, but I cannot get it to work. I also have links to facebook and twitter, but they do not interfere with anything. I am just a bit stuck here. I just cannot solve this problem.
EDIT: Ok, so I now have the links working for text, what I was able to do was use the z-index to put the linked text on top of the div layer and I can now click on those links as they are present. I obviously made the z-index ratio higher than the links in the footer, and it works great. The only issue I still have is getting the whole slide itself or just the picture itself to link or be clickable in its own right, as it pulls from another div layer, basically using my ul a attribute when I hover over the picture, which is not what I want it to do.
That's weird, for me it works correctly (only you forgot the first < tags for your item divs)
If you want a clickable entire div => change <div class="item"> to <a class="item">
If you want a clickable image inside div => wrap a tags around the img
If you want a clickable text inside div => wrap a tags around <span class="space">
If it doesn't work, you've probably made a typing mistake, because in this test:
http://jsbin.com/apuwal/2/edit , wherever I wrap the anchor tags, it works.
EDIT: Ah I got you now. I re-tested the code with a function alerting the href of a link when clicking on it. After some searching, it turned out, you have to scrap the position: absolute; from your classes .space (twice!) & .item. http://jsbin.com/apuwal/7/edit
This is because absolute positioning ignores the presence of other elements, and so your elements will all stack up at the same position and only one link will be clickable. If you wish to keep the position of your items absolute, you will either have to:
set different margins for your elements so they don't overlap
Use keyframes (dunno if this is possible, never tried) to change the z-index of the item with opacity > 0.5 or so
Set your items to display: none; when they finish fading out. (through Javascript/ jQuery)
Give the hidden elements a different margin when they fade out.
I know CSS sliders/faders are pretty sophisticated now, but the way I see it right now, the easiest solution would still be javascript