I am trying to create the zoomIn effect like this page: Example Website
The top "mk" logo zooms in on page load.
I tried to copy the code and this is what I have so far but it's not working:
html:
<div id="header">
<div id="toplogo"><h1>PagesByZ:: Think Outside the Box</h1></div>
</div>
css:
#header {
width: 800px;
height: 80px;
animation: 0.4s ease-in-out 0s normal forwards 1 zoomIn;
}
#toplogo h1 {
margin: 0;
padding: 0;
}
#toplogo h1 a {
display: block;
width: 212px;
height: 80px;
margin: 20px 0 0;
background: url('http://www.interfaithmedical.com/pz/theImages/hdrLogo.png') no-repeat;
color: #fff;
font-size: 40px;
font-weight: 400;
outline: none;
text-indent: -10000px;
}
JDFiddle example: http://jsfiddle.net/n75rL/
I am trying to accomplish that effect on my logo each time the page loads.
I think you mean "zoom out".
You're missing the actual animation list definition:
#keyframes zoomIn{
0% {
opacity: 0;
transform: scale(10);
}
100% { /* <- not really required if these are the defaults */
opacity: 1;
transform: scale(1);
}
And it appears that you're using the wrong shorthand property format (see the syntax section here).
(here's an updated JSFiddle)
Related
so I am trying to add a loader to a webpage and it wont hide the all elements, although on a page it does at another html it doesnt , it's about a logo which z-index is set to 1 but the loader its set to 99999, I've tried to change the z-index of the logo to 0 but it still shows up, SO studying more the only difference is that on a page the logo is anchor and on another its not , and where its declared as anchor it wont hide on loading animation.
<div class="white-logo"><img src="img/logo_black.png" alt="logo_white"></div>
.loader_bg{
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader{
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 200px);
left: calc(50vw - 75px);
text-align: center;
}
.loader:before, .loader:after{
content: '';
border: 1em solid #BDBDBD;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before{
animation-delay: .5s;
}
#keyframes loader{
0%{
transform: scale(0);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: scale(1);
opacity: 0;
}
}
.white-logo > a > img {
display: run-in;
width: 5%;
margin-left: 10%;
margin-top: -8.5%;
position: absolute;
z-index: 1;
}
I added some screenshots to understand the problem with the difference , I think is from anchor but I dont know what to do
Here are the photos and the difference
I am not certain if this is what you want (I assume the animation should display over the .loader_bg) so I just set the .loader_bg to have a negative z-index.
.loader_bg {
z-index: -1;
}
I have taken the liberty of making a jsfiddle with the relevant code in, but you will need to update if this is not the desired effect, adding an example would help, but you can also edit the fiddle and iterate over it.
EDIT
Sorry I see the issue now, I added some text to the anchor.
Change your .loader_bg with these properties:
.loader_bg {
z-index:0;
top: 0;
}
Solved, seemed I had two files with the css animation, one for the text and one for the circles, I put all of them in one file and it worked, thank you!
I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.
I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.
Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.
I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.
html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>
So how could I make it become smooth ?
This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it
I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.
html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>
Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.
I am trying to create a curtain effect on some text. I want the text to be hidden at first and then have an animated reveal from the middle of the text to the outer edges. I want this to work even if there is an odd number of letters. In other words, breaking up the string would not work. If there is only one giant character in the string I want it to reveal from the center of the character to the outer edges of the character. I do not want a curtain effect on the background, since I don't know what I want to have for a background yet. I want it only on the text.
Here is what I have so far:
HTML
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
CSS
body {
margin: 0;
}
.container {
position: relative;
font-size: 3vh;
width: 100%;
height: 100vh;
background: lightblue;
}
.my-name {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 0;
overflow: hidden;
white-space: nowrap;
animation: showName 5s linear 3s forwards;
}
#keyframes showName {
from {
width: 0;
}
to {
width: 15ch;
}
}
The overflow:hidden and the width from 0 to 100 give me what I want in terms of the individual characters gradually being revealed instead of popping in like a typewriter. The problem is that it generates from the left to the right. Is there any way I can start expanding the width from the middle to the outer edges?
Firstly, you would need a keyframe to auto width which you can't do. I'd suggest rethinking your methodology.
I'd go with animating a clip path
body {
margin: 0;
}
.container {
position: relative;
font-size: 25vh;
width: 100%;
height: 100vh;
background: lightblue;
display:flex;
justify-content:center;
align-items:center;
}
.my-name {
font-weight: bold;
color: white;
overflow: hidden;
padding: .25em;
background: rebeccapurple;
clip-path: inset(0 100% 0 100%);
animation: showName 5s linear forwards;
}
#keyframes showName {
0% {
clip-path: inset(0 100% 0 100%);
}
100% {
clip-path: inset(0);
}
}
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
I work with search bar, and i want to make it nice, but for some reason transition animation is not working for me, i try to use few methods but only animation css is help example:
.active {
width: 100%;
outline: none !important;
z-index: 901;
border: 1px solid #30a161 !important;
animation: animateRight .6s ease-in-out;
}
#-webkit-keyframes animateRight {
0% {
width: 100px;
}
100% {
width: 100%;
}
}
But transition method for me it's better, so what i want, i have animation hiding body, animation of closing input for search (opening animation i have) maybe better solution to move to transition.
.search_modal {
position: absolute;
top: -50px;
left: 0;
transition: top 1s ease; // here should be animation
}
JsFiddle
So i want 2 animation, first when added class .search_modal it;s moving to -50 on top and when closing again need animation, and input opening and closing.
You need to put the transition property on the element before you transition and make your transition class more specific. The following snippert should do the trick
header .search_container {
position: relative;
display: flex;
flex: 1;
align-items: center;
margin-right: 1rem;
z-index: 1024;
top: 0;
transition: top 1s ease; //Add it here
}
header .search_container.search_modal {
top: -50px;
left: 0;
}
I have created this animated underline, but the bottom seems to sit still whilst everything else moves - making it look "laggy"
I created a codepen to illustrate the issue.
Do you have any idea why is this happening?
Codepen for illustration
<!DOCTYPE html>
<html>
<body>
<span class="divider-body">
<div class="divider-wave" data-text="dividerdivider"></div>
</span>
</body>
</html>
<style type="text/css">
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: relative;
top: -42px;
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: underline;
animation: animate 0.5s linear infinite;
}
#keyframes animate
{
0%
{
left: 0;
}
100%
{
left: -30px;
}
}
</style>
To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through; property and value. I changed the positioning for demonstration purpose.
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
position: relative;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: line-through;
animation: animate 0.5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
100% {
left: -30px;
}
}
<div class="divider-body">
<span class="divider-wave" data-text="dividerdivider" />
</div>
I would also suggest swapping the span and div, since a span can only contain phrasing content, as described here. See a list of content categories here.
The text-decoration-style: wavy; doesn't have great support:
https://caniuse.com/#search=text%20decoration%20style%20wavy
I'd suggest doing this as a background image with background-repeat: repeat; and animate the background-position property.
Backgrounds will animate a lot smoother.
A short inspect shows that the line is moved back, which causes the problem. This happens on the left side as well, but by moving the line out of the container, it is no longer visible. The solution is simple; the width of the container should be the length of the line minus the moving distance of the line.
width: 1130px;
Visual: https://codepen.io/Toeffe3/pen/MWYqJyz