I'm trying to suss out the differences between the following cases--specifically why scale is preserved in the second div, but not the first.
Secondly why the similar code doesn't work for translate between the third and fourth divs.
(And, if that wasn't cryptic enough, why you have to reverse the animations in the first and third divs to make them run the correct direction).
Just Click on Each Div to Start Animations
#div1,#div2,#div3,#div4{position:absolute;height:40px;width:40px;background:orange}
#div2{background:blue;top:100px}
#div3{background:green;top:200px}
#div4{background:purple;top:300px}
#-webkit-keyframes scaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{--trnsS:2}
}
.scaleTest {-webkit-animation:scaleTest reverse forwards linear 5s}
#-webkit-keyframes otherScaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{-webkit-transform:scale(var(--trnsS,2))}
}
.otherScaleTest {-webkit-animation:otherScaleTest forwards linear 5s}
#-webkit-keyframes translateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{--trnsx:200px}
}
.translateTest {-webkit-animation:translateTest reverse forwards linear 5s}
#-webkit-keyframes otherTranslateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{-webkit-transform:translate3d(var(--trnsx,200px),--transy,0px)}
}
.otherTranslateTest {-webkit-animation:otherTranslateTest reverse forwards linear 5s}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="div1" onclick="javascript:this.className='scaleTest'"></div>
<div id="div2" onclick="javascript:this.className='otherScaleTest'"></div>
<div id="div3" onclick="javascript:this.className='translateTest'"></div>
<div id="div4" onclick="javascript:this.className='otherTranslateTest'"></div>
</body>
</html>
I'm only targeting the Webkit rendering engine, so I'm viewing the sample code in Chrome/Chromium.
Thanks for any input.
Short answer
Animating scale and translate with CSS variable is not treated differently.
There were some issues in your CSS that caused your animations to not work properly.
Explanations
To forward the values of the properties, they need to be present in the 100%{…} (or 0%{…} if reversed)
In the 4th div, in your otherTranslateTest, you used a new variable --transy (must be a typo-error for --trnsy !) without even using var(…). That caused the animation to not work at all. I've changed it to var(--trnsy, 0px) to make it work.
You don't need to reverse the animations. The above corrected your cryptic behaviours.
⋅⋅⋅
I've also added the below in the snippet to make it simpler (no need to re-run to re-play the animation) and more visual:
function toggle(name){
event.target.classList.toggle(name);
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
Working snippet
function toggle(name) {
event.target.classList.toggle(name);
}
div {
position: absolute;
height: 40px;
width: 40px;
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
#div1 {
background: orange;
}
#div2 {
background: blue;
top: 100px;
}
#div3 {
background: green;
top: 200px;
}
#div4 {
background: purple;
top: 300px;
}
/* Animation of div1 */
#keyframes scaleTest {
0% {
transform: scale(var(--trnsS, 1));
--trnsS: 2; /* Added to work with forwards */
}
100% {
--trnsS: 2;
}
}
.scaleTest {
animation: scaleTest reverse forwards linear 5s;
}
/* Animation of div2 */
/* Why using an empty CSS var ? */
#keyframes otherScaleTest {
0% {
transform: scale(var(--trnsS, 1));
}
100% {
transform: scale(var(--trnsS, 2));
}
}
.otherScaleTest {
animation: otherScaleTest forwards linear 5s;
}
/* Animation of div3 */
#keyframes translateTest {
100% {
--trnsx: 200px;
}
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
--trnsx: 200px; /* Added to work with forwards */
}
}
.translateTest {
animation: translateTest reverse forwards linear 5s;
}
/* Animation of div4 */
#keyframes otherTranslateTest {
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
}
100% {
transform: translate3d(var(--trnsx, 200px), var(--trnsy, 0px), 0px);
}
}
.otherTranslateTest {
animation: otherTranslateTest forwards linear 5s;
}
<div id="div1" onclick="toggle('scaleTest');"></div>
<div id="div2" onclick="toggle('otherScaleTest');"></div>
<div id="div3" onclick="toggle('translateTest');"></div>
<div id="div4" onclick="toggle('otherTranslateTest');"></div>
Hope it helps.
Related
I have an image of a butterfly, something like this.
I am trying to figure out if there is any way to make it look like its wings are opening and closing with a 3D CSS transform/translate or animation, but without having to split the image up into parts (it can be a background image of a div though if that helps).
Yes, using background applied to two elements where each one will show only one half and then you simply rotate both on the Y axis.
.box {
width:300px;
margin:20px;
display:flex;
perspective:500px;
}
.box::before,
.box::after{
content:"";
padding-top:56%; /* ratio based on your image */
flex:1; /* half the main element size */
background-image:url(https://i.imgur.com/DgMoHC5.jpg);
background-size:200% 100%; /* twice bigger than the pseudo element to get half the image*/
animation:left 1s linear infinite alternate;
transform-origin:right;
}
.box::after {
background-position:right; /* get the right part of the image */
animation-name:right;
transform-origin:left;
}
#keyframes left{
to {transform:rotateY(60deg)}
}
#keyframes right{
to {transform:rotateY(-60deg)}
}
<div class="box"></div>
A more realistic animation with some translation:
.box {
width: 300px;
margin: 20px;
display: flex;
perspective: 500px;
}
.box::before,
.box::after {
content: "";
padding-top: 56%;
flex: 1;
background-image: url(https://i.imgur.com/DgMoHC5.jpg);
background-size: 200% 100%;
animation: left 0.5s linear infinite alternate;
transform-origin: right;
}
.box::after {
background-position: right;
animation-name: right;
transform-origin: left;
}
#keyframes left {
from {
transform: translateZ(80px) rotateY(-30deg)
}
to {
transform:translateZ(0px) rotateY(50deg)
}
}
#keyframes right {
from {
transform: translateZ(80px) rotateY(30deg)
}
to {
transform:translateZ(0px) rotateY(-50deg)
}
}
<div class="box"></div>
I am trying to move a skewed div from top left off screen, through the screen, to bottom right off screen. The effect I am trying to get is that it looks like a parallelogram appears from somewhere up and to the left, and it slowly moves through the screen in a downwards and rightwards motion and then off the screen to the bottom.
Right now I have this index.html:
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="div1" id="one"></div>
</body>
</html>
And here is my index.css:
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200px, -1000px);
transform: skew(20deg);
}
100% {
transform: translate(250px, 750px);
}
}
I have two problems:
First, it is changing shape from the skewed shape (looks like a "\") to a unskewed one (looks like a "|"). If I try to add a skew in my 100% keyframe, then it does not move any more, it just stays in the same place. I tried both orders skew then translate / translate then skew.
Second, it does not seem to start above the screen, but right in the middle of the screen.
Appreciate any advice.
You were overwriting the transform property. Transform accepts multiple styles, separated by spaces. If you add the transform property twice, it will overwrite the first one. Just put the translate and skew on the same line both times and it will work.
For the second part, translate it by percents (relative to itself) rather than pixels (absolute measures).
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200%, -200%) skew(20deg);
}
100% {
transform: translate(250px, 750px) skew(20deg);
}
}
<div class="div1" id="one"></div>
So, I have the snippet below and I'd like to add an anchor link to it. Unfortunately, there is no information on how to.
So, how do I add a link inside a data-marquee attribute?
<div class="marquee marquee-speed-normal"
data-marquee="Some text **I want to have a link in here** Some text">
</div>
Have a look at this...
An Anchor can in most cases be placed like this. There are loads of info out there with very little effort on finding them.
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right" scrolldelay="300">
This link will take you to a page with what you need to know
</marquee>
<marquee direction="right" scrolldelay="300">
And this is why you should try not to use it.
</marquee>
</body>
</html>
Try this then. From what i've seen, the easiest way was to turn the entire marquee into a link like below. The reason seems to be that data-marquee prints the data and won't represent anything else.
It would be great cool to see if there is another way other than that to display a link within the marquee.
<a href="#1">
<h1 class="marquee marquee-direction-alternate" data-marquee="HTML5 marquee"></h1>
</a>
If you don't come right, I also found this very useful. Here i have done the same with CSS. This is still widely supported.
*/The behavior is determined with CSS*/
<style>
.scroll-slow {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.scroll-slow p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-slow 25s linear infinite;
-webkit-animation: scroll-slow 25s linear infinite;
animation: scroll-slow 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes scroll-slow {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
/* Browser bug fix */
-webkit-transform: translateX(100%);
/* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
/* Browser bug fix */
-webkit-transform: translateX(-100%);
/* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
*/ And then the anchor is done as follows */
<div class="scroll-slow">
<p>This is my link</p>
</div>
Ok Jim, a long shot
I Is this what you want to do?.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>jQuery Marquee Plugin Example</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
<style>
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
</style>
</head>
<body>
<div class="marquee">This is my link</div>
<script src="js/index.js"></script> </body>
</html>
index.js
$(".marquee").marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: "left",
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
I want to add 2 transition transforms
But I want to start the second transform after the end of the first transform
the element should go to a point slowly and after that it should go to another point
transform: translate(0%, 300%), translate(15%, -136%);
You cannot do this with just a single element using transition because when you put more than one translate within the transform, the transform property on the whole is transitioned and not one by one.
With pure CSS transition using an extra wrapper element:
If you add an extra wrapper element around the actual element and put one of the transforms on the wrapper element you could achieve the effect that you are looking for. It would also produce the exact reverse effect on the hover out (hover the body and hover out in the below snippet).
.wrapper {
position: relative;
height: 100px;
width: 100px;
transition: all 1s 1s;
}
.content {
position: absolute;
height: 100%;
width: 100%;
border: 1px solid;
transition: all 1s;
}
body:hover .content {
transform: translate(15%, -136%);
transition: all 1s 1s;
}
body:hover > .wrapper {
transform: translate(0%, 300%);
transition: all 1s;
}
body {
min-height: 100vh;
}
<div class='wrapper'>
<div class='content'>Some text</div>
</div>
Transition with a bit of JS/jQuery without any extra elements:
If you add an extra wrapper element around the actual element and put one of the transforms on the wrapper element you could achieve the effect that you are looking for. It would also produce the exact reverse effect on the hover out (hover the body and hover out in the below snippet).
$(document).ready(function() {
var isHover; /* variable to track state */
$('body').hover(function() {
isHover = !isHover; /* invert the state */
$('.content').css('transform', 'translate(0%, 300%)');
}, function() {
isHover = !isHover; /* invert the state */
$('.content').css('transform', 'translate(0%, 300%)');
});
$('.content').on('transitionend', function() {
if (isHover) {
$('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)');
} else {
$('.content').css('transform', 'none');
}
});
});
.content {
height: 100px;
width: 100px;
border: 1px solid;
transition: all 1s;
}
body {
min-height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>
With animation and no extra element:
Using animations this can be done using a single element but the reverse effect is tough to achieve. We would have to write extra code for this and even then it will be complex.
.content {
position: relative;
height: 100px;
width: 100px;
border: 1px solid;
}
body:hover > .content {
animation: move 1s forwards;
}
#keyframes move {
0% {
transform: none;
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: translate(0%, 300%) translate(15%, -136%);
}
}
body {
min-height: 100vh;
}
<div class='content'>Some text</div>
Animations with reverse effect:
Below is a snippet which produces the reverse effect also using CSS animations. But as you can see it is a bit complex. We can do this using a single animation also but it would become more complex.
$(document).ready(function() {
$('body').hover(function() {
$('.content').css('transform', 'none');
$('.content').removeClass('hover-out').addClass('hover-in');
}, function() {
$('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)'); /* as soon as an animation is removed, the element would snap back to original state, to avoid that we have to add final state via inline style */
$('.content').removeClass('hover-in').addClass('hover-out');
});
});
.content {
height: 100px;
width: 100px;
border: 1px solid;
}
.hover-in {
animation: hover-in 1s forwards;
}
.hover-out {
animation: hover-out 1s forwards;
}
#keyframes hover-in {
0% {
transform: none;
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: translate(0%, 300%) translate(15%, -136%);
}
}
#keyframes hover-out {
0% {
transform: translate(0%, 300%) translate(15%, -136%);
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: none;
}
}
body {
min-height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>
I want to place my image left outside of page how to do it?
+-------------------+
| visible page part |
image -> | |
+-------------------+
Finally I want to move image inside page.
+-------------------+
| visible page part |
| image inside page |
+-------------------+
You can use either negative margin or translateX transform to achieve this. The below snippet has an example for both approaches.
One thing to note is that the two methods work a bit differently even though their end output is similar. While translateX(-100%) moves element to the left (on the X-axis) by as many pixels as the width of the image, margin-left: -100% moves the image by as many pixels as the width of the container of the image. So, if the emphasis is on just left outside the visible part then using translateX(-100%) is more suitable.
/* using negative margins */
.margin {
margin-left: -100%;
animation: marginmove 1s 3s forwards;
}
#keyframes marginmove {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* using translate transforms */
.translate {
transform: translateX(-100%);
animation: translatemove 2s 3s forwards;
}
#keyframes translatemove {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* Just for demo */
body {
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 1px solid;
}
html,
body {
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/1" class="margin" />
<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/2" class="translate" />
Note: As mentioned in comments, if there is a chance that the page's width can become lesser than the viewport's width then it would be imperative to add overflow: hidden to the root/parent element (as applicable) to prevent the image from showing up outside the page's left border.
You can adapt the above answer to work even when the image is part of a centered column which has equal margins on either sides. Below is a sample snippet to help you:
/* using negative margins */
.margin {
margin-left: -100%;
margin-right: 0%;
animation: marginmove 1s 3s forwards;
}
#keyframes marginmove {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* using translate transforms */
.translate {
transform: translateX(-100%);
animation: translatemove 1s 3s forwards;
}
#keyframes translatemove {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* Just for demo */
.container {
width: 300px;
margin: 0 auto;
border: 1px solid;
overflow: hidden;
}
.container > div{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<div>Centered column</div>
<img src="http://lorempixel.com/300/100/nature/1" class="margin" />
</div>
<div class='container'>
<div>Centered column</div>
<img src="http://lorempixel.com/300/100/nature/2" class="translate" />
</div>