I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.
<div class="tm-scroll">
<span></span>
</div>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
Thanks for your help
You have to add scrollHelperFerro animation using keyframes like below
https://codepen.io/rohinikumar4073/pen/MWaeRMZ
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
,
}
}
<div class="tm-scroll">
<span></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="tm-scroll"><span></span></div>
</body>
</html>
here you define only animation-name, time, etc. but actual CSS animation code is following
animation: scrollHelperFerro 2s infinite ease-in-out;
add animation css:
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
Related
as a newbie in CSS animations i'm trying to make some spinners,
Unfortunately i am not able to make repeat a cycle of animations and i'm searching help!
Here is the code:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
I even tried with infinite attribute but obviously it continues to repeat every block:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
So in conclusion:
block1 executes, block2 executes, block3 executes, block4 executes then repeat from block1
You will need to create a keyframe for each block:
.rotate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg) ;
display: flex;
flex-wrap: wrap;
width: 100px; /* change this to control the size */
}
.rotate div {
flex:1 1 48%; /* little less than 50% to consider the margin */
margin: 1px;
background-color: black;
animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
content: "";
display: block;
padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}
/* [0% first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80% pause 100%] */
#keyframes fade1 {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
20%,100% {
opacity: 0;
}
}
#keyframes fade2 {
0%,20% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
40%,100% {
opacity: 0;
}
}
#keyframes fade3 {
0%,40% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
60%,100% {
opacity: 0;
}
}
#keyframes fade4 {
0%,60% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
80%,100% {
opacity: 0;
}
}
<section class="animation rotate">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
This question already has answers here:
how to flip the div using css?
(3 answers)
Closed 2 years ago.
i am trying to show backside of card on hover using css. i tried below code but its just roates front div and doesn't display back div. also i want to hide front div on hover. Can anyone fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
i try to solve you question and this is my answer....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
Just change
.content:hover .front {
transform: rotateY(180deg);
}
to
.content:hover .front {
display: none
}
Check out this
https://jsfiddle.net/1dsv7e6b/1/
Please add opacity:0;
.content:hover .front {
transform: rotateY(180deg);
opacity:0;
}
You could use CSS animations here to give the effect of the card flipping but then also being hidden.
The #keyframes defines the animation. Here it starts at 0% with no rotation and opacity of 1 (i.e. visible).
Then at 100% the animation is complete at the rotation is 180 degrees and opacity set to 0 so that it is hidden.
#keyframes flip-card {
0% {
transform: rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
You can then apply this on hover like so:
.content:hover .front {
animation: flip-card 1s;
animation-fill-mode: forwards;
}
You use the animation property to call the animation and also add how long it should take.
An example can be seen here:
https://jsfiddle.net/368jr1ts/
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
When resizing the browser, there are white spaces in Safari 11.
.river {
width: 100%;
overflow: hidden;
position: relative;
}
.river-frame {
width: 100%;
position: relative;
animation: river-horizontal 10s infinite linear;
}
.river-frame:after {
content: "";
height: 100%;
width: 500%;
position: absolute;
left: 0;
top: 0;
background-size: 20% 100%;
background-image: url(https://dummyimage.com/600x400/000/fff);
}
.river-frame-img {
width: 100%;
}
#keyframes river-horizontal {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
<div class="river">
<div class="river-frame">
<img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg">
</div>
</div>
We can't find the source of issue, any help is appreciated. Consider that we only want to use transform in our animation.
A force redraw is needed for Safari browsers. There is a trick that can be done using jQuery. Include jQuery in your document. And run this small script and things will be working as expected. I have included the snippet below. Hope it helps. 😃
$(window).resize(function() {
$('.river').hide().show(0);
})
.river {
width: 100%;
overflow: hidden;
position: relative;
}
.river-frame {
width: 100%;
position: relative;
animation: river-horizontal 10s infinite linear;
}
.river-frame:after {
content: "";
height: 100%;
width: 500%;
position: absolute;
left: 0;
top: 0;
background-size: 20% 100%;
background-image: url(https://image.ibb.co/iUbhYw/library.jpg);
}
.river-frame-img {
width: 100%;
}
#keyframes river-horizontal {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="river">
<div class="river-frame">
<img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg">
</div>
</div>
.
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()