Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Here's is link to a website http://newworldorder.com/ , whenever I load the page, I see the background zoom in for like 2 seconds, is it possible to achieve this with css? If yes, how can I do it?
Maybe something like this? Although, it resets to 1x scale at the end.
<style>
div {
background-image: url("https://images.unsplash.com/photo-1547898812-9e25c5a693e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
-webkit-animation: zoomin 5s 1;
}
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
}
}
</style>
<body>
<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>
I don't know what you are really asking, but this might be what you are looking for:
html, body {
background: url("http://placehold.it/200x200") top center no-repeat;
animation: animateBg forwards 2s ease-in;
}
#keyframes animateBg{
from { background-size: 200px; }
to { background-size: 100%; }
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I would like to make an animation for a popup that would slide to the left at the beginning and then disappear with the opacity after 8 seconds but I can't find how to do it.
What I have for now is
#keyframes popup-anim {
0% {
right: -100%;
opacity: 1;
}
50% {
right: 32px;
}
100% {
opacity: 0;
}
}
first your popup container should be relative then only you can make animation with respect to container
its difficult to guess on what html you are trying to fit the animation but however this should work for you
#keyframes popup-anim {
0% {
left: 0;
}
16% {
left:-32px;
opacity: 1;
}
100% {
opacity: 0;
}
}
.popup-container{
position: relative;
animation: popup-anim 8s forwards;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Can anyone help with an animation used by gatsby in their official website < https://www.gatsbyjs.com/ > in the used by logo slider section, I've tried to inspect the element and I found this ->
Also, I've tried to search on their open source git repo < https://github.com/gatsbyjs/gatsby/tree/master/www > and its huge, no success.
Seems not to be too complicated to do it manually though, Does anyone has any ideia how can I implement that animation-1qdclt7 keyframe?
Thank you!
If you look at the <ul> tag:
.css-zpz5mt {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
-webkit-animation: animation-1qdclt7 60s linear infinite;
animation: animation-1qdclt7 60s linear infinite;
}
Detailed animation (animation-1qdclt7):
#keyframes animation-1qdclt7{
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am setting up a new website, and I want to add a CSS hover effect. Can you tell me what to do? I want my image has a zoom hover effect.
.zoom {
padding: 50px;
box-sizing: border-box;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" ></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
It is possible to achieve this footer only with css?
Thanks
Please try this:
.container {
background: yellow;
height: 180px;
width: 400px;
}
.box {
width:400px;
height:80px;
background-color: white;
border:1px solid white;
border-width:0 0 13px 0;
margin:1rem auto;
-webkit-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
-moz-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
}
<div class="container"><div class="box"></div></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div in the sidebar. The whole div is a link which takes you to another part of the website.
Now, there is this small flower like image in the left side of the div, background image. When you hover the div the flower should
rotate
fade in and out.
If I apply the animation on the entire div, the div will rotate, not the background image. So I solved it like this: the flower is in an absolutely positioned div and rotates and fades in and out continuously (if I apply the animation to the :hover then it rotates only when I hover directly on the image.)
Is this what you want?
http://jsfiddle.net/kgFdJ/2/
#foo {
width: 300px;
height: 500px;
background-color: #eee;
position: relative;
}
#foo:after {
content: "";
width: 20px;
height: 20px;
background-color: #f00;
position: absolute;
top: 10px;
left: 10px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s
}
#foo:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
But be aware that using a pseudo selector to another pseudo selector could get a little buggy in some browsers, so instead you can do something like this:
HTML
<div id="foo">
<div class="flower"></div>
</div>
CSS
#foo:hover > div.flower ...