LinuxQuestions.org
Visit the LQ Articles and Editorials section
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices



Reply
 
Search this Thread
Old 07-29-2013, 05:37 PM   #1
hal8000b
Member
 
Registered: Mar 2001
Location: UK
Distribution: Mint, Arch, Debian7
Posts: 170

Rep: Reputation: 21
CSS3 Animation : Change background position


In the following CSS3 example:


http://www.w3schools.com/css3/tryit....ss3_animation3


Is it possible just to move a background to a new position?
The red square moves around but always returns to starting position,
ideally I would just like it to move to the right and stop.


Thanks in advance for help or info.
 
Old 07-30-2013, 10:34 AM   #2
vmccord
Member
 
Registered: Jun 2012
Location: Lawrence, KS
Distribution: Mostly CentOS
Posts: 52
Blog Entries: 25

Rep: Reputation: Disabled
Yes,

animation-fill-mode: forwards;

Edit the sample at http://www.w3schools.com/css3/tryit....ss3_animation4 so it includes the animation-fill-mode.

Code:
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-fill-mode: forwards;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-fill-mode: forwards;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
100%  {background:green; left:0px; top:200px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
100%  {background:green; left:0px; top:200px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Last edited by vmccord; 07-30-2013 at 10:35 AM.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Change boot animation: Droid Incredible nine9nine Linux - Mobile 2 10-16-2011 07:05 PM
Google plus album photo animation with css3 and javascript johnsdk Programming 2 07-30-2011 06:38 PM
background image position RudraB General 1 05-13-2008 11:47 PM
How can I change my display position? Lannix Linux - General 1 02-12-2007 02:40 PM
Change background in solaris and Xterm background also EvilAngel Solaris / OpenSolaris 2 01-31-2005 12:25 PM


All times are GMT -5. The time now is 06:45 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration