i'm building a website and i got some issues with a text slide animation.
here is the fiddle
And here is the animation part :
.slide {
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
animation-name: slide;
animation-duration: 1s;
}
#-webkit-keyframes slide{
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
#keyframes slide{
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
As you can see when the text slides in, the sentence shrinks itself and it doesn't look really smooth. Can someone help me with that ?
I also have a little problem with the blue banner : It looks like it has a margin on the left of like 10px and i can't remove it.
How can i have the banner to take the entire width of the browser ?
This is my first time posting here so if i'm doing something wrong could you tell me please :)
As your div .text has no width assigned, he tries to fit the text inside your div. You can change this by adding a width to your .text:
.text {
width: 100%;
}
Second, the margin you want to avoid is caused by a browser standard for your body tag. You can remove it by adding margin: 0; to it:
body {
margin: 0;
}
You can check your working JS FIDDLE demo. I have added a black background to demonstrate the removed margin.
Related
.redbox{
width: 100%;
background-color: red;
height: 100px;
animation-name: movereverse;
animation-duration: 5s;
position: relative;
animation-fill-mode:forwards;
animation-direction:normal;
animation-timing-function: ease-in;
overflow: hidden;
}
#keyframes movereverse{
0%{
left: 0;
}
25%{
left:250px;
}
50%{
}
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="redbox">hello</div>
</body>
</html>
I want to reduce the width of the red box to a certain width through animation. let say, I want to fix the width to 40% but want to show it with the help of animation. I used left property, but it is overflowing through my screen. Is there any way to fix the width to 100 percent and then apply the animation so it does not get overflow and the content remains inside the div.
I think this is what you are looking for but I cannot be sure for sure because I read your question like couple of times and still kind of doesn't make sense
Here:
#keyframes movereverse{
0%{
width: 100%;
left: 0;
}
100%{
width: 40%;
left: 60%;
}
}
Try by take redbox div within other div. And apply style on other div. Both divs (redbox and other) should have position relative.
Maybe it will work.
I have a container that contains a div inside it. By clicking on that div square, it begins moving and ends up being outside the container.
My problem is that this inner block is being trimmed out really harsh while going beyond the borderline. How could this transition be done more smoothly using CSS means? I want to get an effect when this square disappearing becomes gentle for the eyes.
Maybe I'm supposed to use some kind of an image mask for the main container or a fade effect for the square. I'm not exactly sure how to achieve that behaviour.
Thank you in advance!
Codepan sandbox
.borderline {
position: relative;
text-align: center;
vertical-align: middle;
line-height: 150px;
width: 400px;
height: 150px;
overflow: hidden;
}
.square {
position: absolute;
width: 150px;
height: 150px;
background-color: #0087ff;
}
.square:focus {
transform: translateX(500px);
transition: all 2s;
}
<div class='borderline'>
<div class='square' tabindex="1">Click me</div>
</div>
maybe you could add an animation to your css with opacity like:
.square:focus {
transform: translateX(500px);
transition: all 2s;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
0% {opacity:1}
50% {opacity:1}
100% {opacity:0}
}
https://codepen.io/anon/pen/rzppON
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}
I though this would be quite easy to understand but i am having trouble getting to grips with it.....
I would like some text on the screen to be animated.
I would like the text to start on the far left within the wrapper, move left until the text has finished displaying and then move right again all within the defined wrapper size (a bit like a bounce effect).
I would like the overflow text to be hidden.
I would like this on a continuous loop.
I would like for this to display in all browsers correctly.
Here is where i have got to:
<style type="text/css">
#wrapper {
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 3s linear infinite;
-webkit-marquee-style: alternate;
}
#keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: -130% }
}
</style>
<div id="wrapper" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>
Any help as ever would be greatly appreciated
Justin.
The code you posted in your question has some typos, I think. There's only one div which has both the wrapper ID and the marquee class.
Following is some code that I think achieves the desired effect. I don't think it'll work using the text-indent as you tried in your question because a percentage in a text-indent doesn't refer to the width of the containing element. I did it using position: relative and a fixed-width marquee element.
Here's a demo: http://codepen.io/Ghodmode/pen/tEDbk
You'll have to add the necessary browser prefixes. The demo relies on prefix-free for that.
HTML:
<div id="wrapper">
<div class="marquee">
<p>Marquee</p>
</div>
</div>
CSS:
#wrapper {
width: 450px;
background-color: #ff0004;
position: relative;
height: 20px;
line-height: 20px;
margin: 1em auto;
overflow: hidden;
}
div.marquee {
position: absolute;
width: 7em;
background-color: #bfb;
text-align: center;
animation-name: marquee;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
p {
margin: 0;
}
#keyframes marquee {
from {
left: 100%;
}
to {
left: -7em;
}
}
For starters, css3 marquee is only supported by webkit browsers at the moment. It would probably be better to use another method for cross-browser comparability such as javascript or jQuery.
Click Here for a great jQuery scroller.
If you still want to use css, here is the syntax for marquee:
-webkit-marquee: [direction] [increment] [repetition] [style] [speed];
You will also want to set overflow-x to -webkit-marquee:
overflow-x: -webkit-marquee;
Here is a version of your code that will work in webkit browsers such as chrome and safari:
<style>
.wrapper{
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee{
white-space:nowrap;
-webkit-marquee: right small infinite alternate fast;
overflow-x: -webkit-marquee;
}
</style>
<div class="wrapper">
<div class="marquee">
marquee information marquee information marquee information marquee information marquee information marquee information marquee information
</div>
</div>
I have this code for my image to nicely slide in to my website from the right side.
img.move
{
position:relative
-webkit-animation-name: image;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes image {
0% {
right:-708px;
}
100% {
right: 0;
}
}
So right now in my webpage, this image starts in the right side background (it's gray) and ends up in its correct position in the container (it's white). What I want to do (but have no idea how to) is to make the image appear from thin air. What I mean is that it would still have its sliding animation, but it would be invisible on the gray part, and only appear out of white part, like the corner of container was printing it. So I wonder, is there any way I could do it?
Thanks for help
EDIT: JSFIDDLE http://jsfiddle.net/EpCM7/
Okay what I am doing is making the image a child of the div.parent.
Then I apply overflow: hidden; to the parent. When the image slides in from outside of it's parent it will not be visible due to the style.
The html:
<div class="parent">
<img class="move" src="http://vabankbroker.com/templates/vabankbroker/images/2.jpg" style="margin-right: -3px;" />
</div>
The css:
div.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
The Fiddle: JSFIDDLE, remove /show in url to view code
Better Practice
#-webkit-keyframes image {
0% {
left: 100%; /* removes the use of negative values */
}
100% {
left: 0;
}
}
try adding opacity to the animation . might be the effect your looking for
#-webkit-keyframes image {
0% {
opacity: 0;
right:-708px;
}
100% {
opacity: 1;
right: 0;
}
}