I have simple html doc with a small amount of css. The transform works but not the transition I have tried numerous things and its looks like an exact copy of a tutorial I'm watching, is there something wrong with the syntax that I keep missing or is there something else that's causing it not to work?
<!DOCTYPE html>
<html>
<head>
<title>transition Learning</title>
<meta charset="utf-8">
<style>
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 600ms ease-in-out;
transform: translate(200px,200px) rotate(45deg);
}
</style>
</head>
<body>
<div id="testItem"></div>
</body>
</html>
Because you don't have anything transitioning? (Click on the box)
document.getElementById("testItem").onclick = function () {
this.classList.toggle('transition');
}
#testItem.transition {
transform: rotate(90deg);
}
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 2s ease-in-out;
transform: translate(0,0) rotate(45deg);
}
<div id="testItem"></div>
Related
I've got a simple mouseover effect on a webpage I'm working on that I'm trying to have auto resize to fit the page so it is more mobile friendly.
Any help would be greatly appreciated. I know I need something like
.responsive {
width: 100%;
height: auto;
...but I'm not certain how/where to insert it so it works.
Code currently looks like this...
<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 100%;
height: auto;
}
.image3 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
</style>
<img class="image3" src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">
Use a div to wrap your image, then apply the responsive class to your div. Also set your image width to 100% so it covers the whole div.
<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 100%;
height: auto;
}
.image3 {
width: 100%;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class="responsive">
<img class="image3"
src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">
</div>
</body>
I am new to CSS-Animation, so maybe the answer for you is easy. But I couldn't find an answer here yet.
I want an Element to start an animation on hover and then never end. It's for an art project because practically it doesn't make any sense.
What I have got is: A little circle, when on hover it starts getting bigger and bigger. And I want that animation to continue endlessly (or fake it like endlessly with transition: 100000s or sth like that).
Any idea how to manage that?
What I have got is this:
.circle{
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.circle:hover{
transform: scale(8000);
}
.circle:hover{
transform: scale(8000);
}
<div class="circle"></div>
Thank you very much already.
I changed the .circle:hover to a new class called "circleAnimation". Then, I gave the circle an onmouseenter event that adds it to the class (since the JavaScript is only one line, I entered it right into value of the onmouseenter event).
This is what the result looks like:
.circle {
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.circleAnimation {
transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('circleAnimation')"></div>
Hope this helped!
I think it can help you.
.circle {
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.animate {
transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>
You can also use onmouseover instead of onmouseenter.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.circle{
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1s;
}
</style>
</head>
<body>
<div class="circle" onmouseover="changeScale(this)"></div>
<script>
function changeScale(circle){
circle.style.transform = 'scale(80)';
}
</script>
</body>
</html>
I am just trying to rotate this element whenever the mouse hovers on it. but it also changes its position. please let me know what's the problem in this code. I am not getting why this happens. Anyone, please help. Any documentation is also accepted.
below is my code.
body{
background-color: black;
color:white;
height: 100vh;
}
.spinner{
height: 150px;
width: 200px;
display: inline-block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: blue;
border-radius: 50%;
transition:transform 1s ease-in;
}
.spinner span{
display: inline-block;
font-size: 1.7em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 500;
}
.spinner:hover{
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinner</title>
<link rel="stylesheet" href="spinner.css">
</head>
<body>
<div class="spinner">
<span>Click me</span>
</div>
</body>
</html>
This happens because you are losing the main transform property from the .spinner element.
.spinner{
transform: translate(-50%,-50%);
}
.spinner:hover{
transform: rotate(180deg);
}
When you hover, your translation property is replaced with the rotation one.
In order to get this to work you need two stack the two transforms in one line, like this:
.spinner:hover{
transform: translate(-50%,-50%) rotate(180deg);
}
Just try changing the values of position and the display property and it will work hopefully.
I have a simple div that goes down when hovered over. As the line goes down I want all the part of the page above the line to be colored with any color but I can't figure out how.
It can be only with HTML & CSS.
.a1:hover {
transform: translateY(96vh);
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 4s;
background-color: #0000ff;
}
<div class="a1"></div>
you have to increase the height instead of translate transform...
change your css to this:
.a1:hover {
height: 96vh;
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 2s ease-in;
background-color: #0000ff;
}
codepen example
This is a way to do it (written by following this answer)
.a1:hover{
transform: translateY(96vh);
}
.a1{
top:20px;
height: 20px;
position : relative;
transition: all 4s;
background-color:#0000ff;
}
.a2{
width:100%;
height:0vh;
transition: height 4s;
}
.a1:hover + .a2{
background-color:#000;
height:96vh;
}
.a2:hover{
background-color:#000;
height:0vh;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Lab2.css">
<title>Lab2b</title>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.
I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image.
I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--animationlibrary githib url-->
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
</head>
<body>
<div>
<img id="starrySky" src="img/stary_nebula.jpg" alt=""/>
</div>
<img id="earth" name="earthRotate" src="img/my_round_earth.jpg" alt=""/>
<style>
img{
position: absolute;
left: -10px;
top: -15px;
height: 175px;
width: 175px;
}
**this is what I have now....**
div#earth{
transform: skew(20px, -10px);
transform: rotate(45deg);
border-radius: 50%;
overflow: hidden;
width:150px;
height:150px;
}
img#earth{
background-image: url("https://s.yimg.com/fz/api/res/1.2 /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
#earth{
position: absolute;
top: 0px;
left: 600px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 50%;
-webkit-animation-name: earthOrbit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
overflow: visible;
}
#-webkit-keyframes earthOrbit{
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
#starrySky{
position: relative;
top: -10px;
left: -10px;
width: auto;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
font-size: 25px;
}
</style>
</body>
</html>
just specify what size the parent <div> has and use overflow: hidden if necessary.
extra: to crop in different shapes, just transform the parent <div>, e.g.:
transform: skew(20px, -10px),
transform: rotate(45deg),
border-radius: 50%