如何在一个元素上同时运行两个动画进行scalling（如放大）并同时旋转。
我已经尝试过但不能正常工作
setTimeout(function(){
document.getElementById('container').style = '-webkit-transform:scale(0) rotate(0deg);';
},1000);
//here I need to scale in and rotate at same time
setTimeout(function(){
//That I have tried intitially and not woking
//document.getElementById('container').style = '-webkit-animation : kf_scale 1s, kf_rotate 1s';
//As suggested by @Terry I have edited after to this but still not working
document.getElementById('container').style = '-webkit-animation : kf_scale 1s';
},3000);@-webkit-keyframes kf_scale {
100% {
-webkit-transform:scale(1) rotate(360deg);
}
}
@-webkit-keyframes kf_rotate {
100% {
-webkit-transform:rotate(360deg);
}
}
#container{
width:100px;
height:100px;
border:solid 1px;
-webkit-transition: all 1s;
}<div id="container">
test animation scale + rotate
</div>
//That I have tried intitially and not woking
document.getElementById（＆＃39; container＆＃39;）。style =＆＃39; -webkit-animation：kf_scale 1s，kf_rotate 1s＆＃39;;
//As suggested by @Terry I have edited after to this but still not working
document.getElementById（＆＃39; container＆＃39;）。style =＆＃39; -webkit-animation：kf_scale 1s＆＃39 ;; }，3000）;
答案 0 :(得分：1)
如果我理解了这个问题，您就会覆盖style属性，因此您的初始transform会被animation覆盖。因此animation赢得了transition的点，它将从元素的默认样式开始。 animation scale()从默认（1）1 transform，因此它不会缩放。要使动画从上一个transform结束的位置开始缩放，请将animation的属性添加到setTimeout(function(){
document.getElementById('container').style = '-webkit-transform:scale(0) rotate(360deg);';
},3000);
//here I need to scale in and rotate at same time
setTimeout(function(){
document.getElementById('container').style = '-webkit-animation : kf_scale 1s';
},5000);的第一步
@-webkit-keyframes kf_scale {
0% {
-webkit-transform: scale(0) rotate(360deg);
}
100% {
-webkit-transform: scale(1) rotate(-360deg);
}
}
#container{
width:100px;
height:100px;
border:solid 1px;
-webkit-transition: all 1s;
}<div id="container">
test animation scale + rotate
</div>package week6Homework;
import java.awt.Color;
import java.awt.Frame;
import java.util.Random;
import acm.graphics.GOval;
import acm.graphics.GRect;
import acm.graphics.GRectangle;
import acm.program.*;
public class BugBotTry1984756212 extends GraphicsProgram
{
//constants for screen specs
final int WIN_HEIGHT = 900;
final int WIN_WIDTH = 1900;
//booleans for turns
boolean turn;
boolean left;
boolean right;
boolean down;
boolean up;
//creating bugbot itself using external class
BugBot bug = new BugBot();
//creating arrays for ovals and rectangles
GOval[] ovals = new GOval[4];
GRect[] rects = new GRect[4];
//this is a string array that will bre sued to figure out what if the bugbot
//needs to go up/down or left/right
//its hard to explain what this does but you will figure it out later in the code
String[] horizontalTurn = new String [2];
String[] verticalTurn = new String[2];
public void init()
{
//setting name of the applet
Frame title = (Frame)this.getParent().getParent();
this.setTitle("BugBotField");
//set screen specs
setSize(WIN_WIDTH, WIN_HEIGHT);
}//init
public void run()
{
//using methods to create the rectangles and ovals and bugbot
createOvals();
createRects();
add(bug, 100, 450);
//asigning words to the horizontal string array
horizontalTurn[0] = "down";
horizontalTurn[1] = "up";
verticalTurn[0] = "right";
verticalTurn[1] = "left";
//assigning values to boolean variables to see where the bug should move
//basivally if the right = true the bugbot will be moving right, and if down is true
//and the rest of them are false the bugbot will be moving down.
right = false;
left = true;
down = false;
up = false;
//main while loop that checks everything nad does everything
while (true)
{
//pause so the game doesn't end within one second after start.
pause(10);
if (right == true)
{
bug.move(5, 0);
}
else if (left == true)
{
bug.move(-5, 0);
}
else if (down == true)
{
bug.move(0, 5);
}
else if (up == true)
{
bug.move(0, -5);
}
//get X and Y coordinates for the bugbot so it wont go out of boundaries.
int bugX = (int)bug.getX();
int bugY = (int)bug.getY();
//for loop to check colossion detection.
//basically for every time the while loop runs (which is every .1 seconds because of our pause)
//it will run this for loop 4 times (because thats how many objects we have in our arrays
// and we are using array.length to see how many times the for loop needs to run
for (int i = 0; i < rects.length; i++)
{
//integer that gets bounds of all rectangles in the array.
GRectangle rectangleBounds = rects[i].getBounds();
//making 3 of those since if the bug hits the last red circle we need
//the game to stop and not turn directions.
// i could do it differently but didn't feel like redoing bunch of stuff so here.
GRectangle ovalBounds1 = ovals[0].getBounds();
GRectangle ovalBounds2 = ovals[1].getBounds();
GRectangle ovalBounds3 = ovals[2].getBounds();
GRectangle ovalBounds = ovals[i].getBounds();
//check for collision with other objects
if (bug.getBounds().intersects(rectangleBounds) || bug.getBounds().intersects(ovalBounds))
{
//check for collision if direction is "right"
if (right == true && left == false && down == false && up == false)
{
for (int x = 3; x >= 0; x--)
{
pause (50);
bug.move(-2, 0);
}
String direction = getRandom(horizontalTurn);
right = false;
left = false;
down = false;
up = false;
if (direction == "up")
{
up = true;
}
else if (direction == "down")
{
down = true;
}
}
//check for collision if direction is "left"
else if (left == true && right == false && right == false && left == false)
{
for (int x = 3; x >= 0; x--)
{
pause (50);
bug.move(2, 0);
}
String direction = getRandom(horizontalTurn);
right = false;
left = false;
down = false;
up = false;
if (direction == "up")
{
up = true;
}
else if (direction == "down")
{
down = true;
}
}
//check for collision if direction "down"
else if (down = true && up == false && right == false && left == false)
{
for (int x = 3; x >= 0; x--)
{
pause (50);
bug.move(0, -2);
}
String direction = getRandom(verticalTurn);
right = false;
left = false;
down = false;
up = false;
if (direction == "right")
{
right = true;
}
else if (direction == "left")
{
left = true;
}
}
//check for collision if direction "up"
else if (up == true && down == false && right == false && left == false)
{
for (int x = 3; x >= 0; x--)
{
pause (50);
bug.move(0, 2);
}
String direction = getRandom(verticalTurn);
right = false;
left = false;
down = false;
up = false;
if (direction == "right")
{
right = true;
}
else if (direction == "left")
{
left = true;
}
}
}//if for collision with objects
else if (bugX >= WIN_WIDTH)
{
right = false;
left = true;
down = false;
up = false;
}
else if (bugX <= 0)
{
right = true;
left = false;
down = false;
up = false;
}
else if (bugY >= WIN_HEIGHT)
{
down = false;
up = true;
}
else if (bugY <= 0)
{
up = false;
down = true;
}
}
}
}
public void createOvals()
{
GOval orange = new GOval(400,100,200,200);
GOval green = new GOval(100,550,300,250);
GOval red = new GOval(1500,450,125,125);
GOval blue = new GOval(1650,150,200,200);
ovals [0] = orange;
ovals [1] = green;
ovals [2] = blue;
ovals [3] = red;
ovals[0].setFilled(true);
ovals[0].setColor(Color.ORANGE);
add(ovals[0]);
ovals[1].setFilled(true);
ovals[1].setColor(Color.GREEN);
add(ovals[1]);
ovals[2].setFilled(true);
ovals[2].setColor(Color.BLUE);
add(ovals[2]);
ovals[3].setFilled(true);
ovals[3].setColor(Color.RED);
add(ovals[3]);
}//creating ovals method
public void createRects()
{
GRect green = new GRect(1000,0,250,250);
GRect green2 = new GRect(650,400,250,100);
GRect RedR = new GRect(1300,700,300,250);
GRect BlueR = new GRect(450,750,250,250);
rects [0] = green;
rects [1] = green2;
rects [2] = RedR;
rects [3] = BlueR;
rects[0].setFilled(true);
rects[0].setColor(Color.GREEN);
add(rects[0]);
rects[1].setFilled(true);
rects[1].setColor(Color.GREEN);
add(rects[1]);
rects[2].setFilled(true);
rects[2].setColor(Color.RED);
add(rects[2]);
rects[3].setFilled(true);
rects[3].setColor(Color.BLUE);
add(rects[3]);
}//create rectangles method
public static String getRandom(String[] array)
{
int rnd = new Random().nextInt(array.length);
return array[rnd];
}//getRandom
}
答案 1 :(得分：0)
只需应用以下内容：
Your.html
<div class="pop"></div>
your.css
@keyframes popDiv {
0% {transform: scale(1) rotate(0deg);}
25% {transform: scale(2) rotate(120deg);}
50% {transform: scale(.5) rotate(240deg);}
100% {transform: scale(1) rotate(360deg);}
}
.pop{
animation: popDiv 8s alternate ease-in-out;
}