I'm struggling with the following situation: I have an element which has a clip path to mask it's content. This is later used for an animation, revealing the content. However, there's another element inside which has an animation of it's own, which is not being masked due to the animation.
Have a look here: https://jsfiddle.net/wne2z1m4/
So basically: -webkit-clip-path:inset(-10% 50% 98% 50%); and animation:animation 1s linear 0s infinite; don't seem to be working well together. If you disable the animation on the button element, you can see it will be masked by the container.
Does anyone know if there's a way to keep the button element animating, but also have it masked?
Thanks!
Just add
overflow: hidden;
In the example below I've made some additional changes to make example more clear, but you don't need them. Just add overflow to element with clip-path.
.foo {
outline: 1px dotted red;
}
.bar {
padding:30px;
background: silver;
-webkit-clip-path: inset(1em 1em 1em 2em);
clip-path: inset(1em 1em 1em 2em);
overflow: hidden;
}
.button {
display:inline-block;
background:red;
animation: animation 1s linear 0s infinite;
}
#keyframes animation {
0% { transform: translateY(50px); }
50% { transform: translateY(0); }
100% { transform: translateY(50px); }
}
<div class="foo">
<div class="bar">
<div class="button">
Test
</div>
</div>
</div>
Related
Need help please !
I need to slide in the whole div texte1 without moving what is inside (h2 and p).
I try to use a mask animation on the div but it didn't work.
any suggestions please !
<div class="container">
<div class="texte1">
<h2>This is a title</h2>
<p> This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
</div>
</div>
.container {
border:1px solid red;
width:800px;
height:200px;
}
.texte1 {
animation: slidein 1s ease-in;
animation-fill-mode: forwards;
overflow:hidden;
border:1px solid green;
}
#keyframes slidein {
from {
width: 0px;
}
to {
width: 100%;
}
}
https://jsfiddle.net/Lounahlem/vb8p23qu/1/
The code given takes the width from zero. This means the included text moves in the sense of being initially on several lines with word wrapping and ends up on fewer lines as the element widens.
This snippet instead translates the whole element - initially completely off screen to the left and then brings it in by having the final translation as 0.
.container {
border: 1px solid red;
width: 800px;
height: 200px;
}
.texte1 {
animation: slidein 1s ease-in;
animation-fill-mode: forwards;
overflow: hidden;
border: 1px solid green;
}
#keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
<div class="container">
<div class="texte1">
<h2>This is a title</h2>
<p> This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
</div>
</div>
I'm working on a website (that I didn't design, someone else gave me the HTML/CSS) as a developer and We've got a nice spinner animation for async loading components. It's forever-spinning animation is defined by this CSS rule:
animation: spinning 1s infinite linear; (it has also vendor prefix versions but it's irrelevant).
The spinning animation is defined as:
#keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
Our designer has put a position: absolute !important attribute to the spinning element. I was trying to position it inside some other element and I've thought that attribute was irrelevant. As soon as I removed position: absolute, the spinner stopped spinning. When I added it again, spinner started spinning again.
I've tried other position values too, it seems that absolute and fixed are working okay (in regards to spinning animation) while relative and static cause the animation to stop.
Why would CSS position attribute affect a spinner animation?
Here is a snippet reproducing the problem:
#keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#first{
position: absolute;
}
#second{
position: relative; /* or don't specify it at all */
}
<div style='background:yellow;width:400px;height:100px;'>
<span id='first' style='animation:spinning 1s infinite linear'>hello</span>
</div>
<div style='background:lime;width:400px;height:100px;'>
<span id='second' style='animation:spinning 1s infinite linear'>hello</span>
</div>
It's because a span is an inline-element by default and so is not affected by transforms.
Setting the position to absolute imparts a block formatting to the span.
Just add display:inline-block:
#keyframes spinning {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
div.one {
background: yellow;
width: 400px;
height: 100px;
}
div.two {
background: lime;
width: 400px;
height: 100px;
}
#first {
position: absolute;
animation: spinning 1s infinite linear
}
#second {
position: relative;
/* or don't specify it at all */
animation: spinning 1s infinite linear;
display: inline-block;
}
<div class="one">
<span id='first'>hello</span>
</div>
<div class="two">
<span id='second'>hello</span>
</div>
heyo fellows gotta question, i have to make a picture that gets a bit transparent (like opacity 0,4), then it size increases like 2x and becomes untransparent again (opacity 1)
and the text all that time doesnt change its position.
img {
opacity: 1;
width: 250;
}
img:hover {
opacity: 0.4;
filter: alpha(opacity=40);
width: 500px;
transition-property: width;
transition-duration: 4s;
}
i've made a css code only for size increasing and transparency, however no idea how to make it opacity 1 again after my 4sec animation and no idea how to make the text stay in the very same position after image size increases.
Here is one solution but without more information it's hard to give you the best possible answer. You can only apply effect on hover with css, which means that picture will go back to normal once the picture is not hovered anymore. If you want a solution that will go back to normal automatically after 4s then you should use javascript.
.wrapper {
width: 100%;
}
figure {
display: inline-block;
width: 120px; /* It has to be bigger than twice the size of your picture if you don't want the text to move */
}
img {
width: 50px;
height: auto;
-webkit-transition: width, 0, 4s;
transition: width, 0, 4s;
}
img:hover {
width: 100px; /* twice the original size */
opacity: .4;
}
.text {
display: inline-block; /* so that your text is aligned with picture */
vertical-align: top; /* so that your text doesn't move */
}
<div class="wrapper">
<figure>
<img src="http://lorempixel.com/100/100">
</figure>
<div class="text">
Some text...
</div>
</div>
Hi I did not understand your problem properly. But here I think you wanted something like this.
HTML
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCrT41Zwh43blojDO5tgu1qnsCXbz1Eu6dBiHipmGKjw-oAr7s8Q" alt>
CSS
#keyframes lI{
0%{opacity:1; transform: scale(1);}
50%{opacity:0.4; transform: scale(1.3);}
100%{opacity:1; transform: scale(1.3);}
}
#-webkit-keyframes lI{
0%{opacity:1; -webkit-transform: scale(1);}
50%{opacity:0.4; -webkit-transform: scale(1.3);}
100%{opacity:1; -webkit-transform: scale(1.3);}
}
img{
display: block;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
}
img:hover{
animation: lI 4s linear 1 forwards;
-webkit-animation: lI 4s linear 1 forwards;
}
Please check this Fiddle http://jsfiddle.net/e7zfwncn/1/. It uses CSS3 animation.
Make sure you add your transition in CSS to the img and not hover, then you will get the transition to work on both the mouse in and mouse out.
http://jsfiddle.net/shannabarnard/v7c9y6qj/
HTML
<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">
CSS
img {
opacity: 1;
transition: all 4s ease;
}
img:hover {
opacity: 0.4;
filter: alpha(opacity=40);
width: 84px; /* twice the original size */
height: 84px; /* twice the original size */
}
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...
I am trying to animate the border-width of a circle to give it a pulsating effect. So let's say we define this circle like this:
.bubble {
width: 100px;
height: 100px;
border-radius: 50%;
background: #facf35;
border: solid 14px #fff0cf;
-moz-animation: interaction_bubble 2s infinite;
-webkit-animation: interaction_bubble 2s infinite;
-o-animation: interaction_bubble 2s infinite;
}
And then I define the animation, which changes the "thickness" of the border (e.g. for Firefox)
#-moz-keyframes interaction_bubble {
0%{border: solid 14px #dfe4c7;}
50%{border: solid 24px #dfe4c7;}
100%{border: solid 14px #dfe4c7;}
}
The problem here is, that the whole object itself moves down and to the right due to the change of the size. How can i prevent it from doing that? I want that the object stays at the same place and just the border resizes. Can you help me with that?
Here's a jsFiddle showing the problem: http://jsfiddle.net/Oinobareion/rRTgk/
Thanks in advance!
Instead of changing the border size, just try to apply a scale transformation, e.g.
#-moz-keyframes interaction_bubble {
0%{ -moz-transform: scale(1); }
50%{ -moz-transform: scale(1.4); }
100%{ -moz-transform: scale(1); }
}
example jsbin (for firefox only): http://jsbin.com/ejejet/3/edit
If you want to mantain instead your original animation try to also add
-moz-box-sizing: border-box;
to the style of your element: this make possible to change the border width without affecting the size and the position of the element itself.
Example jsbin (for firefox only): http://jsbin.com/ejejet/4/edit
As a side note your animation could be simplified like this:
#-moz-keyframes interaction_bubble {
0% {border-width: 14px }
50% {border-width: 24px }
100% {border-width: 14px }
}
since you're changing only the border-width property
I did it now with 3 separate elemets, like this. It's a little bit more complicated, but at least it works :-) 2 Elements with the same position lie behind the first circle and are resized.
http://jsfiddle.net/Oinobareion/rRTgk/6/
<div class="bubble position_bubble"></div>
<div class="bubble_animated position_bubble_animated"></div>
<div class="bubble_animated2 position_bubble_animated2"></div>