I'm curious. It's more for fun and tips but do you know if I can deal with a property to position the text in the middle.
I have post code on JS bin (refresh if CSS don't open) : http://jsbin.com/3/uhumok/edit?html,css,live
HTML :
<a class="one" href="#">Hi !</a>
CSS :
a {
display:block;
color:white;
text-decoration:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
text-align:center;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
border-width:50px;
border-color:rgba(0,0,0,1);
-webkit-transition:0.2s ease;
-moz-transition:0.2s ease;
-ms-transition:0.2s ease;
-o-transition:0.2s ease;
transition:0.2s ease;
}
a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
a.one {border-style:solid;}
I think this is impossible without :after or :before.
Can't you add another tag inside the <a>? If so, you can absolute position this inner tag to achieve that: http://jsbin.com/3/uhumok/6/edit?html,css,live.
if you make the color:#000 and add padding-top:50px to :hover, the text will almost stay in the same place. i didn't save the example because i didn't see a save option. if you used :before/:after the text would be absolutely positioned so idk why you don't want to use them;
Related
I'm trying to animate a FAB button when it's clicked. I want it to open and fills up the screen - It's for a responsive webApp running in mobile devices.
The problem is: When I click to open the button, it gets the full width instantly and then animate up. And to close the button, it shorten instantly and then animate down.
The problem is I'm using a fixed position, so I don't know how to deal with it.
This is an code example:
html:
<div class="fab" ng-class="{'open': fabOpen}" ng-click="toggleFab()">
<span ng-show="!fabOpen">FAB</span>
<h4 ng-show="fabOpen">Just a test</h4>
</div>
scss:
$time: 400ms;
.fab {
-webkit-transition-duration: $time;
-moz-transition-duration: $time;
-o-transition-duration: $time;
transition-duration: $time;
border-radius:50%;
background:#358FE8;
display:inline-block;
height:80px;
line-height:80px;
width:80px;
position:fixed;
bottom:16px;
right:16px;
text-align:center;
cursor:pointer;
color:white;
&.open {
background:#fff;
color:black;
border:1px solid #eee;
border-radius:2px;
left: 16px;
width:auto;
height:90%;
}
}
And this is an live demo of the problem: http://jsfiddle.net/tfrxf0p5/
A workaround to fix the issue I had was to use a width:calc; and doesn't use the left property.
This way I can calculate the maximum width of the element based on the distance of the border. So, since I already have a position right of 16px I need to have a width of 100% minus 16px for each side.
Final code would be something like this:
&.open {
width:calc(100% - 32px);
/*left:16px;*/ //Doesn't need it
}
I can't fix the fiddle on my phone for some reason. you have transition-duration but you never set what to transition.
I'm trying to use CSS3 transitions to make a :hover class fade in subtley rather than straight away.
I've tried apply transition both to the CSS for the element and also to the :hover css class but neither work. Where am I going wrong? How should I apply transition correctly?
JS fiddle
#menu-main-menu a {font-size:30px;transition: zoom 5s ease;transition: color 5s ease;}
#menu-main-menu a:hover {color:#ed918b;zoom:85%;}
Actually the second transition is overriding the first one. You should combine them as follows:
transition: property1 5s ease, property2 5s ease;
However, zoom is not a animatable property. It was intended by IE and it has a limited browser support. If you want to change the scale of an element, you could use transform: scale() notation instead.
Therefore the declaration would be:
#menu-main-menu a {
transition: transform 5s ease, color 5s ease;
}
vendor prefixes omitted due to brevity - Example Here.
And to answer the initial question, in most cases it's better to apply the transition on the main selector rather than the :hover state.
...what the above suggested, however the correct position to place it is in the element and NOT in the :hover state.
Putting it in the hover state, would trigger the smooth transition when hovering ON the element, but hovering out would be sudden because the transition wouldn't exist.
I created a quick example to explain this to you:
div.nav1 > a{
display:inline-block;
padding-left:0px;
color:blue;
transition: all 0.2s;
}
div.nav1 > a:hover{
display:inline-block;
padding-left:10px;
color:red;
}
div.nav2 > a{
display:inline-block;
padding-left:0px;
color:blue;
}
div.nav2 > a:hover{
display:inline-block;
padding-left:10px;
color:red;
transition: all 0.2s;
}
div.nav3 > a{
display:inline-block;
padding-left:0px;
color:blue;
transition: all 2s;
}
div.nav3 > a:hover{
display:inline-block;
padding-left:10px;
color:red;
transition: all 0.2s;
}
<div class="nav1">
Home<br />
About<br />
Products<br />
Contact<br />
</div><br />
<div class="nav2">
Home<br />
About<br />
Products<br />
Contact<br />
</div><br />
<div class="nav3">
Home<br />
About<br />
Products<br />
Contact<br />
</div>
Hope that this helps!
I know there are a lot of other questions on using transitions on CSS pseudo element but after going through a whole bunch of them I still can't get my scenario to work.
Basically, I want to add a class to an element, the class has a :after pseudo element with some content and a background. I'd like a fading effect on the :after element when adding or removing the class.
I've been trying this out in this jsfiddle and the code I have so far it this:
HTML
<div id="divA">Div test</div>
<button id="btnAdd">Add it</button>
<button id="btnRemove">Take Away</button>
CSS
div {
width: 200px;
transition: all .5s linear;
background: red;
}
.test{
background: blue;
}
.test:after{
background: #0c0;
content: "Test";
}
jQuery
$("#btnAdd").click(function() {
$("#divA").addClass("test");
});
$("#btnRemove").click(function() {
$("#divA").removeClass("test");
});
Any help and hints would be most appreciated.
Forking #NilsKaspersson answer to make it work with your requirements.
Transition means from X to Y, you can't expect it to work with newly created attributes.
Then you have to create an initial attribute, and alter it later.
Since you don't want it to be there at the beginning, just use color: transparent; and background: transparent;
Running Demo
Code:
div {
width : 200px;
transition : all .5s linear;
background : red;
}
div:after {
transition : all .5s linear;
background : transparent;
color : transparent;
content : "Test";
}
.test{
background : blue;
}
.test:after{
background : #0c0;
color : black;
}
There are two things going on here.
1.) transition only works when there's something to transition from. Since your :after element is essentially created when the class test is added to it, there's no transition going on.
2.) transition doesn't inherit, so you'll need to declare it once again on the pseudo element.
Here's a quick n' dirty fork of your JSFiddle.
I moved the generic rules for the pseudo element to the classless div and added a transition to it. Then when the class test is added to it, the background changes and it can transition from it's old value.
If you don't want the pseudo element's content to be visible all the time, consider hiding it with opactiy: 0 and transition that to 1, or use the transparent color value for background and/or color.
Edit: Changing answer based on new fiddle.
On most case, CSS transition must apply on already-defined properties.
Additionnaly, the changing of a pseudo :after element content will make the element be removed and re-added, which removes the said properties at the same time.
I have made a demo with animating the text color and background-color while pre-setting the content, so the properties are already present.
CSS :
div {
width: 200px;
transition: all .5s linear;
background: red;
}
div:after {
transition: all .5s linear;
background: red;
color: red;
content: 'Test';
}
.test{
background: blue;
}
.test:after{
background: #0c0;
color: black;
}
Fiddle : http://jsfiddle.net/W5e9Q/10/
I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.
Is it possible to use Webkit animations/transitions to animate a strikethrough line going through a word from left to right? As far as I can tell, I can only make it fade in/out, not animate it striking the text out.
Any help would be appreciated. Thanks.
This works.. (I used hover, not sure what event you want it to trigger)
html:
<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>
css:
span.line_wrap {
position:relative;
display:inline-block;
}
span.line {
display:inline-block;
position:absolute;
left:0;
top:50%;
width:0;
border-top:1px solid grey;
-webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
width:100%;
}
fiddle:
http://jsfiddle.net/bendog/LXKJU/
EDIT: This is really just to illustrate it's possible... makes horrible markup though. I wouldn't advise you to use it...
EDIT 2: Or triggered with Javascript: http://jsfiddle.net/bendog/Kdd7K/