i'm studying css3 animation from a playlist in youtube , i made a box comes from top and make swing
my problem is that when make a swing not starting where first animation left, here's the code :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box">
<span>X</span>
</div>
</div>
</body>
</html>
CSS :
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 200px;
margin:0 auto;
transform: translateY(100px);
background: red;
transform-origin: 10px 10px;
animation: box 2s forwards,mm 1s 3s linear forwards;
}
span{
border:2px solid yellow;
background-color: yellow;
}
#keyframes box {
0%{
transform: translateY(-200px);opacity: 0;
}
70%{
transform: translateY(150px);
}
100%{
transform: translateY(100px); opacity: 1;
}
}
#keyframes mm {
0%{
transform: translateY(100px);transform: rotateZ(0deg);
}
40%{
transform: translateY(100px);transform: rotateZ(90deg);
}
70%{
transform: translateY(100px);transform: rotateZ(70deg);
}
100%{
transform: translateY(100px);transform: rotateZ(75deg);
}
}
wheres the problem ?
here's the video that i watched for this animation: CSS Animation Tutorial #11 - Animating a Pop-up
you've done it wrong in 'mm' keyframes,
when you are writing transform, you are doing
transform: translateY(100px);
transform: rotateZ(0deg);
and this first transform property gets overridden by the second transform property (Cascading), so writing it like this would fix it.
#keyframes mm {
0%{
transform: translateY(100px) rotateZ(0deg);
}
40%{
transform: translateY(100px) rotateZ(90deg);
}
70%{
transform: translateY(100px) rotateZ(70deg);
}
100%{
transform: translateY(100px) rotateZ(75deg);
}
}
Checkout the codepen here
Related
I found a css code to make a text sliding on my webpage from right to left, I found that I can adjust the speed of the slide in this line "animation: scroll-left 20s linear infinite;" where I can change the "seconds" argument.
But I would like the text to be repeated, i.e something like this:
Please read this page Please read this page Please read this Please read Pl
instead of:
Please read this page
where one have to wait that the text finish the line to come back again.
Here is my code for now:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-left 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-left 20s linear infinite;
-webkit-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scroll-left {
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>
<body>
<div class="container">
<br><br><br><br><br><br><br><br><br><br>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="scroll-left">
<p>Please read this page </p>
</div>
</div>
</div>
</div>
</body>
</html>
I have tried all the options of this css code, but no one makes what I need.
Thank you
There are so many alternatives through which you can accomplish your job like marquee css and javascript etc. According to your requirement you need a custom code like css and js as well.
Please check the link. this is what you need.
http://jsfiddle.net/roine/TCJT4/
Hope this helps!
Based on your request of a pure css solution, there's no other way to duplicate the text without appending a new one or using javascript:
.scroll-left p:before, .scroll-left p:after{
content: 'Please read this page';
margin: 0 20px;
}
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
});
On my website, a keyframes animation is supposed to tint in blue an image. But the position:fixed of the property making this very same image responsive seems to mess with the keyframes.
If I remove the position:fixed, the blue tint transition occurs. But when I put it back, the tint transition is white instead of blue.
For the codepen : click here
Is there any way to get both of these properties to work along ?
Here's the code :
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="hover-min.css" />
<link rel="stylesheet" href="main.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>
<script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="background.js" type="text/javascript"></script>
</head>
<body>
<div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
<img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
</div>
</body>
</html>
/* CSS */
img.nyc {
*position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
top:0;
left:0;
z-index:-1;
}
#opacity {
background-color: #428BCA;
display:inline-block;
}
#opacity img {
height : 300px;
opacity: 0.5;
-webkit-animation: animation 2s linear;
-moz-animation: animation 2s linear;
-ms-animation: animation 2s linear;
-o-animation: animation 2s linear;
animation: animation 2s linear;
}
#-webkit-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#-moz-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-ms-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-o-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
Move the fixed positioning to #opacity:
#opacity {
position: fixed;
}
"#opacity" doesn't know how big it should become after you set it's child to position:absolute or position:fixed.
If you set
#opacity {
height : 300px;
width: 660px;
position: fixed;
background-color: #428BCA;
display:inline-block;
}
it will work again.
You will likely need some js-code to crop the parent to it's biggest child.(https://stackoverflow.com/a/2822685/5191731)
Can somebody help me, please. I'm starting with css animations and transforms. What i want is an infinite rotation of a division (with svg inside). My css/html5 concoction works fine in Firefox but not in Google Chrome. I'm not sure where the problem lies. This is the link:
Infinite CSS Rotation
And a second step I want to control the animation with jQuery. This again doesn't work in Chrome but it does in FF. The link to this extended example:
Infinite CSS Rotation with jQuery control
Any clue will be much appreciated.
Try this,you forgot #keyframe and -webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container {
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;}
#rotate1 {
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
}
#keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
#-webkit-keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
Here is a simple example based on:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
at the bottom of the page it provides a webkit animation demo which I edited in order to demonstrate the -webkit-animation-play-state
jsfiddle
In short it could be accomplished by detecting the current animation state, and based on that set -webkit-animation-play-state to running or paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
click
js:
$('a').click(function(){
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running"){
$p.css("-webkit-animation-play-state", "paused");
} else {
$p.css("-webkit-animation-play-state", "running");
}
return false;
})
css:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Rotate division infinite using css and html
css code is :
<style>
div{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
div in HTML
<html>
<body>
<div><img src="xyz.png" height="200px" width="200px"/></div>
</body>
</html>
in div a image rotate infinite
I tried to flip an image and then rotate it using css.
This is the page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> Mounts </title>
<style type="text/css">
img {
-webkit-transform: rotate(180deg);
-webkit-transform: scaleX(-1);
}
</style>
</head>
<body>
<img src='1.jpg'>
</body>
</html>
But one of the transform functions was disabled by chrome.
Is it illegal to use more than one transform function ?
You can combine them in one statement:
transform: rotate(180deg) scaleX(-1);
Or you could use the matrix property: http://www.w3schools.com/css3/css3_2dtransforms.asp
There's even generators for the code, such as: http://www.css3maker.com/css3-transform.html
I had problems with Lea Verou's rotating sign too. It did not work without modification in webkit. This is how I solved it:
<style>
div {
width: 9em;
padding: .6em 1em;
margin: 2em auto;
background: yellowgreen;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-play-state: paused;
animation: spin 1s linear infinite;
animation-play-state: paused;
}
#keyframes spin {
to {
transform: rotate(1turn);
}
}
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
}
div:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
</style>
<div ontouchstart="">Hover over me and watch me spin!</div>
I had that problem and I could solve it in this way:
(I just wanted to rotate and flap a photo with class of left-img)
(and enjoy;))
.left-img{
-webkit-transform:rotate(-90deg) scaleX(-1);
-moz-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
}