For some reason, I can not click on links that are in animated divs. They are some clouds that move arround.
html:
<div class="container">
<div id="clouds">
<div class="cloud1"><img src="../images/cloud_portfolio.png"/></div>
<div class="cloud2"><img src="../images/clouds_customer.png"/></div>
</div>
</div>
css:
.container {
width: 1100px;
position: absolute;
top: 80px;
height: 200px;
overflow: hidden;
margin: 0 auto;
z-index:1;
}
#clouds {
top: 50px;
position: relative;
-webkit-animation: move 40s infinite linear;
-moz-animation: move 40s infinite linear;
-ms-animation: move 40s infinite linear;
z-index: 2;
}
#clouds a{
cursor:pointer;
text-decoration: none;
}
I've never worked with CSS-animation but isn't it possible that you move the images under another element thus making the links unclickable? Are you seeing this in every browser and does removing the animation really make a difference?
Related
I'm working on a project where I want to have two animation with one following the other after a delay. I've gotten the two animation on the same line with one following after a delay, but I can't seem to get it work perfectly. The issue that I am having is that the first animation is starting after 0%/0vw, so it's show the animation start instead of it coming from off the page. I would really appreciate any help or advice on how to get this to work. Thank you!
.announcement {
justify-content: right;
align-items: center;
display: flex;
}
.announce {
font-size: 1.3rem;
position: relative;
/* animation: mymove 20s infinite;*/
/* animation-timing-function: linear;*/
animation: linear 15s mymove infinite;
}
.announce2 {
font-size: 1.3rem;
position: relative;
/* animation: mymove 20s infinite;*/
/* animation-timing-function: linear;*/
animation: linear 15s mymove2 infinite;
animation-delay: 5s;
}
#keyframes mymove {
from {right: 0vw;}
50% {right: 50vw !important;} /* ignored */
to {right: 100vw;}
}
#keyframes mymove2 {
from {right: 0vw;}
50% {right: 50vw !important;} /* ignored */
to {right: 100vw;}
}
<div class="announcement">
<div class="announce">
Hello
</div>
<div class="announce2">
Hello
</div>
</div>
To get the announcement off the screen to the right it needs to not only be positioned right: 0 but also to move further to the right by its own width. This can be achieved with a translation of 100%.
As an example, this snippet gives both announcements the same animation and other settings - apart from giving announement2 the animation delay.
The parent element has overflow hidden, and the body is given margin 0 to ensure that the announcements go fully from the right to the left.
body {
margin: 0;
}
.announcement {
justify-content: right;
align-items: center;
display: flex;
overflow: hidden;
}
.announce,
.announce2 {
font-size: 1.3rem;
position: relative;
animation: linear 15s mymove infinite;
right: 0;
transform: translateX(100%);
}
.announce2 {
animation-delay: 5s;
}
#keyframes mymove {
to {
right: 100vw;
transform: translateX(0%);
}
}
<div class="announcement">
<div class="announce">
Hello
</div>
<div class="announce2">
Hello
</div>
</div>
Note: if what you are wanting is an evenly spaced continuous flow then you might like to search for 'marquee' on StackOverflow - not the HTML tag which is deprecated but continuous rotating banner.
I have a page transition but when going from a white page to a black page, the circle clip path creates a small gap, as seen on the screenshot.
Meanwhile here is a demo https://elk-sand.vercel.app/. It happens when going from the home page to transformeren page from the navigation.
Another demo: https://codesandbox.io/s/dazzling-dirac-r000oy?file=/src/App.js
screenshot issue:
Funny how this question is being closed for not providing code while their is a code sandbox, so here you go for the ones who prefer it here:
.App {
font-family: sans-serif;
text-align: center;
}
#keyframes mymove {
from {
clip-path: circle(0%);
}
to {
clip-path: circle(50%);
}
}
<div
style="
height: 100vh;
background: red;
position: fixed;
inset: 0px;
animation: mymove 20s infinite;
"
className="App"
>
<div
style="
position: fixed;
inset: 0px;
background: yellow;
animation: mymove 20s infinite;
"
></div>
</div>
The issue is a red border around the yellow circle, which should not be there.
After some investigating, I found out it was due to a small scale from 105% to 100% and the clip-path circle which was getting bigger.
Adding translate-z did not solve this issue, unfortunately. I removed the small scale since it didn't add that much effect.
To fix the example that I sent is easy to solve just add 1% to the highest element circle path or set a delay on the first element.
.App {
font-family: sans-serif;
text-align: center;
}
#keyframes mymove {
from {
clip-path: circle(0%);
}
to {
clip-path: circle(50%);
}
}
<div
style="
height: 100vh;
background: red;
position: fixed;
inset: 0px;
animation: mymove 20s infinite;
animation-delay: 0.05s;
"
className="App"
>
<div
style="
position: fixed;
inset: 0px;
background: yellow;
animation: mymove 20s infinite;
"
></div>
</div>
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.
Is it possible to get it to transition back after we mouse off and the animation ends?
You can see an example here: http://codepen.io/jhealey5/pen/zvXBxM
Simplified code here:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
transform: translateY(-60px);
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
transition: .5s;
}
#keyframes rotate {
from {
transform: translateY(-60px) rotate(0);
}
to {
transform: translateY(-60px) rotate(-90deg);
}
}
I have forked your project and adapted it so it works. You can find it here.
What I have changed is the following:
I give the white square a start position of top: 150px and let it, on hover of div, get a top: 0. The span gets a transition: top .5s and with that it goes to top: 0; on hover and back to top: 150px; when the mouse leaves.
I have removed the translateY(-60px); from the animation, because that would move it even more up when the animation would start.
Here's your new CSS:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
top: 0px;
animation: rotate 1s infinite .5s alternate;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
top: 150px;
margin: auto;
transition: top .5s;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-90deg);
}
}
Edit: The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the keyframes until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that. transition is action-based, which means it gets triggered every time an action (for example :hover) is happening. On :hover, this means it takes .5s to go to top:0 and when the hover ends, it takes .5s to got to top:150px.
I hope the above addition makes sense :)
As you can see, I also cleaned up a bit in your animation-name: etc., since it can be combined into one line.
As Harry pointed out, the problem is that you are animating/transitioning the same property, in this case transform. It looks like the current versions of Chrome/FF will allow the animation to take control of the property, thereby breaking the transition. It seems like the only way to work around this is to transition/animation a different property. Since you need to continue rotating the element, you could translate/position the element by changing the bottom property instead. I know that doesn't produce the exact same results, but nonetheless, it does move the element (just not relative to the parent element).
Updated Example
div:hover span {
bottom: 80px;
}
As an alternative, you could also wrap the span element, and then translate that element instead.
In the example below, the .wrapper element is transitioned to translateY(-60px) on hover, and then the child span element is rotated and maintains the animation.
Example Here
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
}
div:hover .wrapper {
transform: translateY(-60px);
}
div:hover .wrapper span {
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.wrapper {
display: inline-block;
transition: .5s;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
}
.wrapper span {
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-90deg);
}
}
<div>
<span class="wrapper">
<span></span>
</span>
</div>
I'm trying to make a child div (.imagehead) slide to the left (about 25%) on hover of the parent div (#bite) and reveal another div (Name not decided, but I want it to be 2-3 lines of text) to the right of (.imagehead), relative to where (.imagehead) is.
I haven't coded in a while, sorry if this is extremely simple and I just can't solve this.
Here is the code itself (a tumblr theme I'm messing with)
<div id="headbox">
<div class="top">
<div class="nav">
<div align="center">
<BR/>
<BR/>
<div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
<div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
<BR/>
<BR/>
</div>
</div>
</div>
#headbox {
top: 30px;
}
#headbox:hover .headimage {
left: 25%;
}
http://jsfiddle.net/bko87pk9/
The image is made position: absolute to remove it from the normal flow. The text will now display underneath.
The nav container is made position: relative so that its absolute children will position themselves in relation to it and not the body
The image is moved on hover and the transition creates a smooth animation to display the text
Examples
Example 1
In this example, the text needs to be contained in a box the same height and width of the image so it does not peek out from underneath.
.nav {
height: 100px;
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text needs to be contained properly.</div>
</div>
Example 2
In this example, the text can spill out underneath as it will be hidden with opacity: 0. On hover the opacity is changed to opacity: 1 with a smooth transition.
The opacity value changes the z-value of the text div, so we need to declare z-index values (higher will display on top of lower)
pointer-events: none prevents the hover from activating when hovering the hidden text.
.nav {
height: 77px;
/* height of image */
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
z-index: 2;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
pointer-events: none;
}
.nav:hover .transitiontext {
opacity: 1;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>
</div>
I am sorry for any not working code, I crested this on my phone.
<div id="test">
Hover on this div.
</div>
#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition:
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}