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/
Related
I have an elegant 3D animation of a molecule Codeine_3d_transparent.gif.
I wish to produce itsshadow : Codeine_3d_transparent-shadow.gif, which using some html and css I will put bellow the colorful animation.
How can I do it quickly ?
As of now I do this but it's not a shadow XD :
To be honest, this will probably hurt some devices performance AF (pardon me) - especially so many filters on GIF. Filters should be GPU accelerated though.
Also note, that filters aren't 100% supported across all browsers.
.animationHere,.animationHere:after{
position:relative;
width:200px;
height:200px;
display:inline-block;
background:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Codeine_3d_transparent.gif);
background-size:100% 100%;
}
.animationHere:after{
position:absolute;
top:3px;
left:3px;
content:"";
z-index:-1;
filter: brightness(0) blur(1px);
opacity: .5;
}
.animationHere.next:after{
position:absolute;
top:30px;
left:0;
filter: none;
}
<div class="animationHere"></div>
<div class="animationHere next"></div>
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've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.
jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/
Is there any solution to make it work in FF?
EDIT
It's fixed in Firefox 34
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
CSS
#container {
position:fixed; left:100px; top:100px;
}
#container.some_state_position {
position:absolute;
}
.box {
width:100px; height:100px;
background:blue;
}
.some_state .box {
background:red; width:50px; height:50px;
}
img, .box {
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-ms-transition:all 1.5s ease;
transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
width:50%;
}
It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.
$("#button2").on({
click: function() {
$("#container").toggleClass("some_state");
setTimeout(function() {
$("#container").toggleClass("some_state_position");
}, 50);
}
});
It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.
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;
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.