I have a quesiton about animation in CSS especially on typewriting effect.
I achieved type writing effect in animation.
However,
even if I didn't set for the animation of transforming,
once the type was generated, text moves to the righthand side.
Why did it happen and how do I fix this problem?
my css animation is as below.
#keyframes fade{
0%{
transform:translateY(30px);
opacity:0
}
100%{
transform:translateY(0);
opacity:1
}
}
my full code is attached in the following link.
https://codepen.io/jotnajoa/pen/abvVzev
Looks like it is inheriting text-align:center from its parent element .beggining.
.explanation is maintaining its center status as the width of the dive grows to 100%. That is why it looks like its position is animated.
I got an image inside bootstrap panel, i want to add functionality when i can click on a rotate button and the image would rotate.
i got the following:
.rotate{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg); // IE9 only
transform: rotate(90deg);
}
if i add class to my img it rotates that 90degs but it comes out of the panel, it stops to follow the width and height restrictions, just rotates in place.
Is there a way to do that? I mean to rotate the image, in a way that it will still be in panel's borders.
EDIT:
i got this: http://jsfiddle.net/jjbjn160/
its overflowing the left side of panel, i want it to fit in to the panel.
set the style of the panel to overflow: hidden.
.panel {
overflow: hidden;
}
I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.
Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.
When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.
Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.
Here's the FIDDLE.
Please help me in animating it when the user scrolls down.
To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.
What properties do you have available to change?
You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.
After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.
.navigation {
background: #fff;
/* position: relative; */
width: 100%;
top: -250px;
}
Then we can transition it to 0:
#nav.affix {
position: fixed;
top: 0;
z-index: 1030;
width: 100%;
-webkit-transition: all 2s ease-in;
transition: all 1s ease-in;
}
RESULT:
http://jsfiddle.net/ShL4T/8/
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
I could not get this to work until I implicitly added position:static to .navigation.
I have a slider, what have an active item which is larger than others. When the controls are clicked, the next/prev item gets the active class. It is working, but I'd like to add a smooth effect for this. Any ideas?
Code:
$('#next').click(function(){
$('#wrap').find('.active').removeClass('active').next().addClass('active');
$('#wrap img:first').remove().appendTo('#wrap');
});
$('#prev').click(function(){
$('#wrap').find('.active').removeClass('active').prev().addClass('active');
$('#wrap img:last').remove().prependTo('#wrap');
});
Example: http://jsfiddle.net/zXjzU/1/
Thanks!
I'm not sure what you define as a "smooth" effect, but a really simple solution given your existing code would be to just add a transition:width 1s to your #wrap img CSS. See JSFiddle:
#wrap img {
width: 100px;
clear: both;
margin: 0 5px 30px 5px;
transition:width 1s;
}
I'm not sure that I'd construct a carousel like this, I'd probably use positions so that my elements scrolled into the center of screen, but it's pretty easy to Google a solution for that too if that's what you're after.
For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be possible just by adding a class to the relevant element after which the css would handle the rest. The problem lies in the fact that if for example
.block.hide{
-webkit-transform:translateY(-10000px);
}
is used the element will first of all fly out of the screen unnecessarily far and with an unnecessarily high speed. And purely from an aesthetic point of view there's a lot left to be desired (Theoretically speaking for example a screen with a height of 10000px could be introduced one day in the future).
(Update) The problem why percentages can't be used is that 100% is relative to the element itself, rather than to the parent element/screen size. And containing the element in a full-sized parent would be possible, but would create a mess with click events. And after a few answers, allow me to point out that I am talking about translations, not about position:absolute css3 transitions (which are all fine, but once you get enough of them they stop being fun).
What aesthetically pleasing solutions to allow an element to translate out of a screen in a fixed amount of time can you guys think of?
Example code can be found in this jsfiddle demonstrating the basic concept.
http://jsfiddle.net/ATcpw/
(see my own answer below for a bit more information)
If you wrap the .block div with a container:
<div class="container">
<div class="block"></div>
</div>
<button>Click</button>
you could expand and then, translate the container itself after the click event
document.querySelector("button").addEventListener("click", function () {
document.querySelector(".container").classList.add("hide");
});
with this style
.block {
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background:gray;
}
.container {
-webkit-transition: -webkit-transform ease-in-out 1s;
-webkit-transform-origin: top;
-webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}
.container.hide {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
/* background:#f00; /* Uncomment to see the affected area */
-webkit-transform: translateY(-110%);
}
In this way, it is possible to apply a correct translationY percentage ( a little more than 100%, just to have it out of the way ) and mantaining the button clickable.
You could see a working example here : http://jsfiddle.net/MG7bK/
P.S: I noticed that the transition delay is needed only for the transitionY property, otherwise the animation would fail, probably because it tries to start before having an actual value for the height. It could be omitted if you use the horizontal disappearing, with translateX.
What I did is use the vh (view height) unit. It's always relative to the screen size, not the element itself:
/* moves the element one screen height down */
translateY(calc(100vh))
So if you know the position of the element in the screen (say top:320px), you can move it exactly off the screen:
/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
I know this is not exactly what you were asking but...
Would you consider using CSS animations with Greensock's Animation Platform? It is terribly fast (it claims it's 20 times faster than jQuery), you can see the speed test here: http://www.greensock.com/js/speed.html
It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.
I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/
Both CSS and possible JS look simpler:
document.querySelector("button").addEventListener("click",function(){
var toAnimate = document.querySelector(".block");
TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});
CSS:
.block{
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background-image: url(http://lorempixel.com/800/100);
}
I recently built an app which used precisely this technique for sliding 'panels' (or pages) and tabs of the application in and out of view. A basic implementation of the tabs mechanism can be seen here.
Basically (pesudo-code to illustrate the concept, minus prefixes etc):
.page {
transform: translateY(100%);
}
.page.active {
transform: translateY(0%);
}
The problem I had was that Android Webkit in particular wouldn't calculate percentage values correctly. In the end I had to use script to grab the viewport width and specify the value in pixels, then write the rules using a library for dynamic stylesheet parsing.
But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.
Use calc method (http://jsfiddle.net/ATcpw/2/):
.block{
position:absolute;
top: -webkit-calc(100% - 110px);
right:10px;
left:10px;
height:100px;
background:gray;
-webkit-transition: all 2s;
/*this adds GPU acceleration*/
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.block.hide{
top: -100px;
}
Since you are using -webkit prefix I used it as well.
calc is supported by majority of browsers: http://caniuse.com/#search=calc
One very simple, but not aesthetically pleasing solution is to define the class dynamically:
var stylesheet = document.styleSheets[0];
var ruleBlockHide;
and
//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);
see: http://jsfiddle.net/PDU7T/
The reason a reference to the rule needs to be kept is that after each screen resize the rule has to be deleted and re-added.
Although this solution gets the job done, there has to be some DOM/CSS combination which would allow this to be done without javascript (something along the lines of a 100%x100% element containing such a block, but I haven't been able to figure out any transform based way).
get the document width. then use a java script trigger to trigger the css3 translation.
function translate(){
var width = document.body.Width;
document.getElementById('whateverdiv').style='translateX(' + width + 'px)';
}
This is simple
add the following to your div
.myDiv {
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: initial
}
then change the "left" property of it either by adding an additional class or by jQuery
This will animate it along the x-axis
Note: you can change the -webkit-transition-property to any property you want and this will animate it