Transitions and Transforms on the same Element, triggered by different Parents - html

I'm having a UL, LI with Links in it.
There is also an Arrow-Circle on the right side of the LI. It will be a subnavigation later.
I want the Arrow to grow (which works), when hovering the LI and to rotate (which works only a bit) when hovering the Arrow itself.
Unfortunately, only the growing is triggered, when hovering the LI and moving on to the Arrow. When hovering the Arrow directly, the rotation is triggered. So I'm sure the CSS Attribute is right, but the combination somehow isn't.
This is the relevant code:
li:hover .arrow {
transition : 0.3s linear;
transform : scale( 1.5 );
}
.arrow-wrap:hover .arrow {
transition : 0.6s linear;
transform : rotate(360deg);
}
To see a mockup-html version, visit this jsFiddle:
https://jsfiddle.net/csf3wwjn/1/
Can anyone tell, whe the rotate isn't triggered when first moving over the LI? I'm not very into the whole CSS3 animation thing and I didn't even know what to search for.
Thx!

The second transformation rule is overriding the first, you should define the scale rule together with the rotate one
/* interesting css */
li:hover .arrow {
transition : 0.3s linear;
transform: scale( 1.5 ) rotate(0deg);
}
.arrow-wrap:hover .arrow {
transition : 0.6s linear;
transform: scale( 1.5 ) rotate(360deg);
}
Demo: https://jsfiddle.net/csf3wwjn/5/
Or, as #Harry pointed out, you can rotate the .arrow-wrap element
/* interesting css */
li:hover .arrow {
transition : 0.3s linear;
transform: scale( 1.5 );
}
.arrow-wrap:hover {
transition : 0.6s linear;
transform: rotate(360deg);
}
Demo: https://jsfiddle.net/csf3wwjn/6/

Related

Why does this CSS a::after show transition after hovering?

I found some code for a link hover effect and while it works fine, I don't understand why it works.
Specifically:
#navbar a:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid;
margin-top: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
#navbar a:hover:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(0.9);
}
This produces an underline effect on the link when hovering.
My question is:
1.) Why doesn't the transition/transform on the a:after take place when the page loads? Why does it only occur when hovering over the element (even though it's not within the hover)?
Although I can obviously see what is occurring from viewing the page, trying to better understand how exactly this works.
I have added one fiddle where you can go and check the code
[https://jsfiddle.net/vickykumarui/96xw3fzv/][1]
Now let me explain what is happening on hover
Initially you have add this code for pseudo element after
transform: scale(0.1); // The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.
opacity: 1; // initially after element is not visible
Now on hover this property changes to
transform: scale(0.9);
opacity: 1;
When these properties changes it does not changes suddenly but it changes slowly in .35s in animated way from this code
transition: opacity 0.35s, transform 0.35s;
transition is applied on both property opacity and transform and 0.35s is time of transition
Note: Based on your comment if you change initial property to
opacity: 1;
transform: scale(0.9);
You see that coming initially also
It does happen. Change the opacity to 1 in the first rule. You don't see it because it's technically hidden when the page loads. When you hover, the opacity becomes one and becomes visible.

How to prevent CSS3 transitions from reversing back?

How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.

How to make html elements fire effects on other elements using css

I have two collections of elements I want to make inter-dependent (binded to each other)
On the one hand I have some text links in a navigation bar, on the other hand I have some elements with references to the same links. These images have animation effects, as described below (the animation occurs when hovering the images).
I want to achieve the following behavior: when hovering over links in the nav. bar, I would like to activate the hovering effects on the images. ¿Is that possible without jQuery?
This is the style of the animated elements
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color:rgba(116,89,47,0.8);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
This is the markup of the navigation elements
<nav><ul>
<li>DSIC</li>
<li>RNA</li>
<li>De Ludo Bellico</li>
</ul></nav>
This is the markup for one of the images with animation effects
<div class="view view-first">
<img src="images/animage.png" />
<div class="mask"/>
<div class="content">
<h2>Name</h2>
<p>Description</p>
Take me there!
</div>
</div>
So, when hovering over elements in the navigation bar , I would like to fire the animation in the associated "view" element
For what I have read, it seems that behaviour can be achieved by using jQuery (or js). But, ¿is it possible to achieve the same effect using pure html and css ? ¿how?
The following picture shows the layout of my page. When hovering in the elements of the navigation bar, in blue, I want to fire an animation in the pictures below.
The strict answer is no, it is not possible to make any element x run the animation for element y when you hover over it. However, you could use pure CSS in the following situations:
1) Your focused element is a parent of .view-first
.y:hover .view-first { ... }
2) Your focused element is adjacent to .view-first
.y:hover + .view-first { ... }
3) Your focused element is a general sibling of .view-first
.y:hover ~ .view-first { ... }
Interestingly, the current proposals for CSS4 include the addition of a "subject selector", which allows you to set the "subject" in your selectors using a !, and thus select upwards in the DOM. (See the current W3C spec - Thanks to Alohci for the link). This would also be useful for this situation, but would still not allow you to select "anything", the elements would have to be related in some way.
Edit
Mr. Alien points out that using the :target pseudo-class could be useful, if you were to allow clicking the element. Lets say you had your HTML as
Start Spin
<div id="spin" class="view-first"></div>
you could then use the target to initiate the spin, by having your CSS as:
.view-first:target { ... }
Though I'm not sure if that helps you too much.
Edit 2019 - The subject selector (!) has been replaced with the :has() selector, but it's still entirely unsupported across browsers (5 years on!)
You can try this:
.view-first { opacity: 0;
/*more properties here*/}
.myDiv:hover ~ .view-first{
-webkit-animation: boxanimation 1.5s;
opacity: 1;
-webkit-transition: all 0s;
-webkit-animation-fill-mode: initial;
/*more properties here*/}
This will work for chrom and safary, for more broser you can set the -moz for firefox, and -o for opera

Hide div after CSS3 Animation

Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).

reverse -webkit-animation iteration for hiding element

I have this animation which I use for a div appear on screen so it comes from the bottom and stays at its final position.
#-webkit-keyframes slide {
from { opacity: 0; -webkit-transform: translateY(500px); }
to { opacity: 1; -webkit-transform: translateY(0); }
}
.module {
-webkit-animation: slide .4s 0 1 normal ease none;
}
I was thinking if it is possible that when I assign class='done' for that div it could take the same animation and play it reversely simulating the same effect hiding the div.
like:
.module.done {
-webkit-animation: slide .4s 0 1 alternate ease none;
}
but it seems it always start from the 1 iteration in the second case I would like to reverse the animation so it could start from the original position and then slide up 500px
Is it possible to achieve using the same animation or do I have to create a new one with inverted values?
Thanks
This specific use case works best with CSS transitions, plus you get free Opera and FF 3.5+ support. This is the basic syntax:
#notice {
-vendor-transition: -webkit-transform 2s ease;
}
#notice.pop {
-vendor-transform: translateY(50px);
}
When you add or remove .pop, the animation is automatically done for you.
Check out the working example:
http://jsfiddle.net/qLKzX/
I believe you can do this by setting the animation-delay to an appropriate negative value (so it starts at the first reversal).