I'm learning about CSS3 transitions and struggling with the vendor prefixes. This is just for fun but I'd like to know why the circle expands on hover in Firefox as it's meant to but shrinks in Safari and Chrome. Webkit seems to be ignoring the width and height but border and opacity are fine. The animation in the normal state seems fine too.
I tried changing the .disc:hover width, and tried changing the transition to width instead of all (which seems to work).. it's just all that seems to not be working.
A link to the page:
http://ambigraph.com/sketchbook/expando/
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
<div class="disc">
</div>
</body>
</html>
The CSS:
#keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
#-webkit-keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
body {
margin: 0 auto;
}
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
It looks like it may be an animation bug since the expando animation is still applied to the element even while hovered. Each browser deals with it differently.
Clearing the animation seems to fix it.
CSS
.disc:hover {
/* ... */
-webkit-animation:none;
animation:none;
}
Firstly you have to differentiate between transition and animation.
The keyframe animation defines the activity that is going on regardless of your input (hover or whatever).
The transition defines what happens when you do something.
To examine the differences between the two states to see what is being transitioned. Remove the duplicates.
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
Essentially, the hover makes the element transparent while increasing the size and changing the border. Since it's transparent, the border really doesn't matter.
Related
CSS newbie here.
I have this image and I want to reveal it from right to left, what do I have to add/change to this code?
.arr1 {
display:block;
position:absolute;
left:1001px;
top:920px;
width:0;
height:99px;
background:url(../img/arr1.png) no-repeat;
background-size:254px 99px;
opacity: 0;
transition: 0.5s linear;
pointer-events: none;
&:hover{
opacity: 1;
pointer-events: all;
width: 254px;
transition-delay: 1s;
}
}
A bit difficult to give a reliable answer without more code, but from what you posted, change the absolute position of the container to right instead of left and add the width of the image to the former left value, resulting in 1255px:
.arr1 {
display:block;
position:absolute;
right:1255px;
top:920px;
width:0;
height:99px;
background:url(../img/arr1.png) no-repeat;
background-size:254px 99px;
opacity: 0;
transition: 0.5s linear;
pointer-events: none;
&:hover{
opacity: 1;
pointer-events: all;
width: 254px;
transition-delay: 1s;
}
}
You might also want to add background-position: right to .arr1, depending how you want the image to be revealed.
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.
Today i wanted to create something like this:
Text moving from left to right
I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.
I stumbled upon some CSS Animations and tried this
#keyframes floatText{
from {
left: 0;
}
to {
right: 0;
}
}
on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.
Thanks in advance!
EDIT:
To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations:
Animated
As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!
Thanks again!
EDIT2:
Is there a way to accomplish something like this?
#keyframes floatText{
from {
left: 0px;
}
to {
left: (-this.width+parent.width)px;
}
}
This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(
You can stop when your text hits the right border
This solution uses CSS translate.
The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.
Make sure your text's display property is NOT inline.
Downsides of this CSS only approach:
Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.
.animated {
overflow: hidden;
width: 11rem;
white-space: nowrap;
}
.animated > * {
display: inline-block;
position: relative;
animation: 3s linear 0s infinite alternate move;
}
.animated > *.min {
min-width: 100%;
}
#keyframes move {
0%,
25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}
/* Non-solution styles */
.container {
display: flex;
flex-wrap: wrap;
}
.animated {
font-size: 2rem;
font-family: sans-serif;
border: 0.1rem solid black;
margin: 1rem;
}
.animated > * {
box-sizing: border-box;
padding: .5rem 1rem;
}
<div class="container">
<div class="animated">
<span>Short</span>
</div>
<div class="animated">
<span class="min">Short</span>
</div>
<div class="animated">
<span>Some more text</span>
</div>
<div class="animated">
<span>A really long text to scroll through</span>
</div>
</div>
change your keyframe value in %
Try This
body{
overflow: hidden;
}
p{
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}
#-webkit-keyframes floatText{
from {
left: 00%;
}
to {
/* left: auto; */
left: 100%;
}
}
<p>hello text</p>
hi dude i have tried this
Note : but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't
see the whole text of the div.
and that is due to the value of the left and right i have set to the -100 and 100 so because i couldn't find the alternative for that so
right now trying to see that how can you make this happen.
and here is my try
div.main_div{
margin:0;
padding:0;
width: 20%;
height: 60%;
background-color:grey;
position:absolute;
overflow: hidden;
}
div.transparent_div{
width:100%;
height:50px;
bottom:0;
background:red;
position:absolute;
}
div.text_wrapper{
height:50px;
bottom:0;
z-index:10;
background:transparent;
white-space: nowrap;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
color:white;
font-size:2em;
vertical-align: middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 1.5s infinite;
animation: anim 1.5s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
#-webkit-keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
#keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
<body>
<div class="main_div">
<div class="text_wrapper">Hiii i am going right to left infinete times and here are the news
</div>
<div class="transparent_div"></div>
</div>
</body>
and here you can check out the demo of the above working code
DEMO CODE
Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.
we can write jQuery code, for finding over-flow text and enable animation:
function AutoScrollText() {
var els = document.getElementsByClassName('container');
[].forEach.call(els, function myFunction(el) {
var isOverflowing = el.clientWidth < el.scrollWidth;
if (isOverflowing) {
$(el).children('span:first-child').addClass('animated');
}
var curOverf = el.style.overflow;
if (curOverf == "" || curOverf === "visible") {
$(el).css({ "overflow":"hidden"});
}
});
}
See: http://jsfiddle.net/nweBD/
I'm trying to create a Coverflow like slideshow using CSS3 transitions, but I'm getting different results from different browsers:
FF; shows wanted behaviour (right slide animates from right to center).
CHROME; first positions right slide at left side, then animates to center.
IE10; does nothing
HTML:
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
CSS:
div{
position:absolute;
width: 300px;
height:100px;
background-color: yellow;
margin-left: -150px;
left: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.middle{
text-align:center;
z-index:2;
height:120px;
}
.left{
text-align:left;
left: 0;
right: auto;
margin-left: 0;
background-color:green;
}
.right{
cursor:pointer;
text-align:right;
right: 0;
left: auto;
margin-left:0;
background-color:red;
}
The problem here is indeed that browsers have no, or at best, various results for animating to and from 'auto'.
To fix this, I have re-written the CSS to not use left:auto; right:0; but left:100%; margin-left:-300px. This means I only have to animate the left and margin-left property, and I don't need to reset them to the default auto. The negative margin is the same amount as the width of the element, which pulls it back to the desired position, giving the same result as right:0;.
Here's an updated fiddle: http://jsfiddle.net/nweBD/3/