How can i make a code where if you open my webpage then this happens: https://www.youtube.com/watch?v=tGsKzZtRwxw using css?
But what i want instead is for the logo to first zoom in (faster, maybe 5 sec until the animation is over) to show the logo, then it goes to the top left where it stays there when you browse through my page. It is for a school project with the theme star wars.
You can do something like in below snippet (using animation) :
Use styles and decoration according to need , this is only a demo.
As known font-size is for text so this animation will work only for text . If you want animation for other stuffs than change accordingly like can use width height higher values or can use transform: scale() property
function zoom() {
var reed = document.getElementById("demo");
reed.classList.add("animation");
}
.animation {
animation: zoomer 5s linear;
}
#keyframes zoomer {
0% {
font-size: 300px;
}
100% {
font-size: 30px;
}
}
.color {
color: red;
font-size:30px;
}
<body onload="zoom()">
<h1 id="demo" class="color">content</h1>
</body>
You can try the CSS zoom rule:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "300%"
}
</script>
<body onload="zoom()">
<h6>content</h6>
</body>
Note: It just makes everything on the page bigger😃
I would suggest that when the page is fully loaded you set the logo style to have an animation which starts with transform with a scale from 1 to something and then moves to top 0 left 0 (or whatever is suitable).
Without seeing your actual code it is difficult to advise further but something like:
#keyframes logo {
0% {
top: 50%;
left: 50%;
transform: scale(1) translate(-50%, -50%);
}
50% {
top: 50%;
left: 50%;
transform: scale(2) translate(-50%, -50%);
}
100% {
top: 0;
left: 0;
transform: scale(1) translate(0, 0);
}
Related
I am using css to animate a div that contains text. The animation works as expected in Chrome, Firefox, and Edge, but not in Safari. The css 1) centers the div, 2) grows the font size from 0 to 200px while simultaneously 3) rotating the div 360deg around the Y axis.
I've "decorated" the presentation so as to make it easier to see what is happening: 1) a small, red square in the center of the window, and 2) a red border around the div.
Here is the HTML:
<html>
<head>
<title>Text Animation</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="myText">Hello World!</div>
<div id="decoration" style="width:10px; height:10px; background-color:red; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%);"></div>
</body>
<script>
/* Initiating the animation via javascript makes it easier to try things */
window.onload = function() { setTimeout(initiateAnimation, 200) }
function initiateAnimation() {
let rotate = "rotateText 2s linear 0s 1 normal none running"
let grow = "growText 2s linear 0s 1 normal forwards running"
let myText = jQuery("#myText")
myText.css("animation", rotate + ", " + grow)
//myText.css("animation", grow)
//myText.css("width", 300)
//myText.css("height", 100)
//myText.css("animation", rotate)
}
</script>
</html>
Here is the css:
#keyframes growText {
from { font-size: 0px; }
to { font-size: 100px; }
}
#keyframes rotateText {
from { transform: rotateY(0deg) translate(-50%, -50%); }
to { transform: rotateY(360deg) translate(-50%, -50%); }
}
#myText {
/* Center the div */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Put the axis of rotation back to the center of the div (ie. compensate for the translation) */
transform-origin: left top;
white-space: nowrap;
overflow: hidden;
font-size: 0px;
border: 2px solid;
border-color: red;
}
Here it is running correctly in Chrome:
Here it is running errantly in Safari:
Note that the axis of rotation is on the left hand edge of the div. So, Safari is honoring the value of the transform-origin. But, Safari is not honoring the translate 50% 50% transform. It is as though Safari does not allow multiple properties to be modified in a keyframe.
You can see it in a browser using this link.
Any ideas? Thanks.
Update 1: If, in Safari, I run only one of the keyframe animations (either rotateText or growText) then it works as desired - everything is properly centered.
I have this little modal that slides-in from the top of the page upon entering, and slides back out again when clicking on it.
My problem is that I don't want it to leave the page completely after clicking. I need to keep the bottom 32px of the modal showing at the top of the screen, so that the user can click it again, and it will slide back down. Furthermore, the modal itself is dynamic and changes height depending on the information passed into it.
My keyframes are these:
#keyframes slide-bottom {
0% {
top: -100%;
}
100% {
top: 50%;
transform: translateY(-50%);
}
}
#keyframes slide-top {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: -100%;
transform: translateY(32px);
}
}
Thanks in advance!
The issue is with the 100% declarations, for slide-top.
100% {
top : calc(-50% + 32px);
transform : translateY(0%);
}
might fix the issue
I have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)
I'm currently trying to create an animation that would make a div look as it if sinks backwards, then (after finished falling back) gets pushed to the left.
I'm using CSS3 right now, but I'm not super familiar with the animation property and am having some problems. Currently I'm using:
#-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
margin-left: -100px;
}
}
The result of this though is that it scales down, then after 50%, starts scaling back up while getting pushed left. I want it though to stay at scale(.9) while being pushed left.
I'd also be willing to do this with jQuery, but animate doesn't support transform, and I don't want to use one of the plugins that enables those animations. So CSS3 felt like it would be a better option.
EDIT
Thanks to gion for his help. Final code below (switched out margin-left):
#-webkit-keyframes sinkBack /* Safari and Chrome */
{
50% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: translateX(-100px) scale(.9);
}
}
keep the scale :
#-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
-webkit-transform: scale(.9);
margin-left: -100px;
}
}
I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(images/arrowup.png);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
background-repeat: no-repeat;
background-position: center;
background-color: #ECEEEF;
border-color: #999;
}
I wish to rotate the image without rotating its content.
Very well done and answered here – http://www.sitepoint.com/css3-transform-background-image/
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
transform: rotate(30deg);
}
Very easy method, you rotate one way, and the contents the other. Requires a square though
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Update 2020, May:
Setting position: absolute and then transform: rotate(45deg) will provide a background:
div {
height: 200px;
width: 200px;
outline: 2px dashed slateBlue;
overflow: hidden;
}
div img {
position: absolute;
transform: rotate(45deg);
z-index: -1;
top: 40px;
left: 40px;
}
<div>
<img src="https://placekitten.com/120/120" />
<h1>Hello World!</h1>
</div>
Original Answer:
In my case, the image size is not so large that I cannot have a rotated copy of it. So, the image has been rotated with photoshop. An alternative to photoshop for rotating images is online tool too for rotating images. Once rotated, I'm working with the rotated-image in the background property.
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
Good Luck...
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
#keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: I've found this somewhere else but don't remember the source
I was looking to do this also. I have a large tile (literally an image of a tile) image which I'd like to rotate by just roughly 15 degrees and have repeated. You can imagine the size of an image which would repeat seamlessly, rendering the 'image editing program' answer useless.
My solution was give the un-rotated (just one copy :) tile image to psuedo :before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated :before element using css3 transforms. Bosh!
try making a div for the image only and then flipping it with transform: scaleY(-1); or transform: scaleX(-1);
if you want to have the navbar in front of the image you can make an overlapping div and set its opacity property to 0;
I tried all solutions but none helped, below is what was my problem and how I solved it:
Problem: we have an image for desktops with landscape orientation but To show the same image but rotated (portrait) for mobile screens.
How: I just rotated the actual image in my assets folder the way I wanted (portrait), and then just used media queries to call that image for my background for mobiles, and that's it.
(this was the easiest and quick solution I did.)
Update Dec 2021
Since the original question is
"..rotate the background image .."
The best answer looks to be here
https://stackoverflow.com/a/62135576/3446280