I want my button to move from the left to the right when I click it. I think I have everything I need, but apparently I have either left something out or I'm not put something in the right order. Why won't my box move? Do I need to use JavaScript? The HTML has nothing more than a button with the class name of box.
.box {
width: 100px;
height: 150px;
background: red;
border: none;
margin: 100px 100px;
cursor: pointer;
animation-name: move-right;
}
.box :hover{
background-color: red;
}
.box :active {
transition: all 2s linear;
}
#keyframes move-right {
transform: translateX(350px,0);
}
You will need to use javascript to monitor the click event.
Tips
The animation name should be removed from the .box class.
The hover effect is the same color as the default state, if you want to show that something is happening it cannot be the same color.
The translateX() takes one value, unless you intended to use the translate(X, Y) which takes two values.
When animating you do not use transition timing, animation has it own timing.
Related
Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.
Here's my code in CSS:
.square{
margin-top: 20px;
height: 100px;
width: 400px;
border-radius: 20px;
background:#3d3434;
outline: none;
transition: 0.25s;
}
.square:hover{
outline: 3px solid #21ff46;
}
Also, I'm relatively new to coding and CSS.
You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.
So, the solution is to add this line to your .square
outline: 0 solid #21ff46;
Leave the rest as it is, your problem is solved.
I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
I'm working in an Angular 9 app and I need to make an accordion menu. Everything works fine with my code except for the animation of the sub menus. I want to animate the content of a sub-menu item when display is change from'block' to 'none' and also animate it when is changing from 'block' to 'none'.
here is a couple of examples of what I need
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
https://primer.fusepx.com/angular/
I also want to keep the code structure as much as possible. I just really need the content animation
Here is an stackblitz example with my code.
https://stackblitz.com/edit/angular-ivy-t6rbdp
Try this
.content {
padding: 10px;
background-color: blue;
height: 0 !important;
overflow-y: hidden;
transition: height 0.5s ease-in-out;
}
.content-open {
opacity: 1;
height: 100px !important;
}
As display which doest represent numeric values you cant do transition on that. So use properties like height.
This question already has answers here:
CSS how to make an element fade in and then fade out?
(5 answers)
How to fade out a div, then fade in another in the same location. CSS only
(1 answer)
CSS Transition - Fade Element on Hover only
(2 answers)
How to play CSS3 transitions in a loop?
(2 answers)
Closed 3 years ago.
I have two div elements that each contain text. I want to fade one div into another div such that as one disappears the other appears and the cycle repeats. Does anyone know how to do that? I don't even know where to start.
<div>
<div>Expand your knowledge</div>
<div>Blah Blah Blah</div>
</div>
Those are the two div elements that should transition from one to another in a cycle.
First things first, I am going to add classes to your HTML elements to use as styling hooks that will make working with them easier. It is also just the best practice to use classes for the majority of styling in CSS. The wrapping class, or "stage" for the animation, will get the class fader-stage. Every "slide" (what I am going to be calling each div element that will fade out and into another) gets the same general class applied to it, fader-slide, and I also apply a unique class for each individual slide that denotes its number in the presentation order (fader-slide--1, fader-slide--2, and so on if you were to add more elements).
<div class="fader-stage">
<div class="fader-slide fader-slide--1">Expand your knowledge</div>
<div class="fader-slide fader-slide--2">Blah Blah Blah</div>
</div>
Now for the CSS! 🎉🎈 ...I am going to start with styling the wrapping div element by using the class hook, fader-stage, we added to the HTML in the above step.
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 2rem auto;
position: relative;
width: 50%;
}
The only part of this style that you absolutely have to keep "as is" here is position: relative. We use this on a containing element so that when we use position: absolute on the child elements in the next step, it doesn't make them position themselves according to the root element of the document, they will instead position themselves according to closest relatively positioned ancestor element (this one). Everything else in this wrapper class can be changed according to your taste, or the particular specifications of the project.
Now we create a simple animation using #keyframes that will take the opacity level from 1 to 0. Seems like we can keep it simple and just call the effect fade-out. We will use this identifier with the animation property in the next step. You can read more about keyframes here if you'd like to know more about this CSS at-rule.
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Now we need to style the "slide" elements that you want to fade into one another. We will be using the general class that we have applied to all the slides, fader-slide.
I set some pretty general styles on fader-slide. I wanted to make each slide take up the maximum amount of space in the wrapping div, and to center all of each slide's content.
I use position: absolute as a way to take each slide out of the normal flow of the document, which will effectively allow them to sit on top of one another. I then set the top and left properties to 0 in order to position the element start at the top left corner of the stage. Had we not set the position property to relative on the fader-stage element in the previous step, doing this would instead position the slides in the top left corner of the document.
I used flexbox properties to easily ensure that everything that is inside the slides gets centered horizontally and vertically.
Most importantly though, I also applied the fade-out animation we made in the keyframes step above. I tell the animation to go through the keyframes animation named fade-out, for that animation to have a duration of 2.5s, to use the ease-out animation-timing-function when animating, to run an infinite amount of times, and to alternate back and forth when it gets to the end of the animation. I do all of that in one line of CSS by using the animation shorthand property.
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
For each individual slide, I then apply an increase of the animation-delay property of 2.5s for each subsequent slide. You can obviously change the animation duration, delay, and timing function to anything you'd like. If you want each slide to begin to fade out as soon as it fully appears then it would be best if the animation duration and each delay increment were equal to one another. For any additional slide you wanted to add, you would just add the delay amount you've chosen to the previous delay amount and then just keep increasing it. This is the way I have done it. I add the z-index property with a value of 1 to the first slide so that it sits on top of the others at the start of the animation after the page loads. Otherwise, the last slide in the DOM order will be on top at the beginning. To make the fading effect more obvious, I would also change the background-color on each subsequent slide.
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
Here is a codepen so you can see it all working together. 🚨
🚨 STROBE WARNING: If you have epilepsy, or suffer from seizures or headaches caused by pulsing light, you may want to avoid viewing this example. The effect is mild in my estimation, but it will automatically play when you follow the above link so I believe it fair to give warning to anyone sensitive to such things.
And here is all the CSS from above in one, easy to copy/paste snippet:
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 20px auto;
position: relative;
width: 50%;
}
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
There is a lot more we could do with it if we kept going, but I believe this achieves the specifications laid out in your question as I understand them.
If you are not using something like Autoprefixr or Prefixfree to apply vendor prefixes to your CSS then you may want to add the -webkit (and possibly -moz and -ms) prefix to the animation property, as well as animation-delay, the #keyframes, and potentially also the flexbox properties (display: flex, align-items: center, and justify-content: center), but only if you want to cast a wide net for backwards browser compatibility. If you don't know how to do this or what I'm talking about let me know and I'll edit to include the browser prefixes.
Autoprefixer also has an online tool for adding vendor prefixes, if you don't want to set it up with PostCSS as package dependency for your project. To use the online tool you just give the app a string describing the browsers you want to target, paste in your CSS, and it will return your CSS with the vendor prefixes necessary to (mostly) ensure compliance with your target browsers added.
If you have any other questions about this method just let me know and I would be happy to help. 🤓👨🏼💻
The #keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
#keyframes animate {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#keyframes animation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.div1{
animation: animation 1s infinite;
}
.div2 {
animation: animate 1s infinite;
}
<div class="div1">Expand your knowledge</div>
<div class="div2">Blah Blah Blah</div>
The page in question:
http://rainbowdoge.000webhostapp.com
The situation:
I have two buttons in the nav menu on the left side.
The upper one contains a hitbox (black for testing purposes), and an image of a rainbow. The image is changing the opacity on hover.
CSS code for that:
.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}
There is also an iframe on the page. The iconHitbox changes the iframe's source on click.
The problem:
If I hover over the top half of the button, the opacity doesn't change, as if a hover isn't even detected.
The solution I could think of:
I thought that maybe something else is getting in the way, but no, the setSrc() function works when I click on the upper half of the button.
This is happening because your #test1, #test2, and #test3 elements are being positioned half way over the rainbow circle. You'll need to move them out of the way.
The div with the id "test3" is overlapping with your icon. You can see it in the dev tools of your browser.
You have absolute set. If you remove absolute then adjust positioning you'll be good.
try:
#mainPageIcon {
background-color: black;
position: relative;
top: 25px;
}
.iconHitbox {
height: 8vh;
width: 8vh;
}