Hello. So I am required to do a flashcard scenario, but I need to know how to only have it affect a certain area I want it to affect, and not something else. This is what I have:
@keyframes timeIt {
from {
transform:rotate(0deg);
left:10px;
}
to {
transform:rotate(360deg);
left:500px;
}
}
div {
animation-name:timeIt;
animation-duration:2s;
animation-delay:2s;
animation-timing-function:ease-in;
}
What would you do in order for it to target one thing, and how
Please post the HTML you are using, and explain which area you want the animation to target.
You’d need to identify the element in the HTML with a class or Id and then use that reference in the css.
E.g. Add a class to the element in the HTML:
<div class=“rotate”>
Then in the css:
keyframes timeIt {
from {
transform:rotate(0deg);
left:10px;
}
to {
transform:rotate(360deg);
left:500px;
}
}
.rotate {
animation-name:timeIt;
animation-duration:2s;
animation-delay:2s;
animation-timing-function:ease-in;
}
Will this work with images and lists. I need to make a review card set, and I am trying to do it using a list. Does it matter, or no?
I’m assuming that you are new to css so forgive the elementary answer but css doesn’t care what the element is and what it looks like (excluding some form elements and some system set preferences).
With CSS you can change how the element looks and how it behaves and style it to do what you want.
So rotating a list or rotating an image makes no difference to css but you do have to apply property values in a way that works with the effect that you want. You may need to control the display of the element and other properties but these are within the realm of CSS.
As @TechnoBear said above we could give more pertinent advice if we had a demo of the css and html that you are currently using and then an idea of the effect you want to produce 
Okay. You would have to give me about half an hour, maybe a little more, before I can access it. Yes, I am kinda new to css, but I have also done a lot of it at once as well. I do appreciate you helping me. Animations and transactions, however, I have never dealt with. Completely new. Again, give me a half an hour to get for you. I promise that I do have, just right now not available. sorry.
<!DOCTYPE html>
<html>
<head>
<title>Jesse's Website</title>
<link rel="stylesheet" type="text/css" href="flashcard.css">
</head>
<body>
<h1>Ready, Set, POP QUIZ!</h1>
<img style="float:right; margin-left:12px" src="https://jcaldwell.neocities.org/Images/IronMan.jpeg" height="270px">
<div style="overflow:auto">
<p>Pop Quiz Time! How do you like that? Hm? Not fun, are they? No, not really. All right, so for this pop quiz is going to be relatively simple. I am going to ask you questoins about random stuff, and you are gonig to try to answer them. Everyone should get these, believe it or not. Example would be like this: When did Iron Man die in Advengers? Answer: Endgame. See? Simple. Not too hard, and not too easy. After all, you need a 4.0 average in your report card, right?</p>
<p>So here is how this is going to work. I will present at least eight cards. You are going to answer them without looking at the answer, and then, if you think you know it, you are going flip the card over. If you get it right, congrats! You will be going to Harvard next semester. Have fun, little ones.</p>
</div>
<img style="float:left; margin-left:12px; margin-right:12px" src="https://jcaldwell.neocities.org/Images/Smiley.jpg" height="270px">
<div style="overflow:auto">
</div>
<p>Here are some rules for you:</p>
<ul>
<li>Take a guess without looking</li>
<li>Only flip the card when you think you have the answer</li>
<li>Get as many as you can correct.</li>
<li>Have Fun! Pop Quiz's are meant for your defeat. Defeat it instead.</li>
</ul>
<style>
div {
width:300px;
height:200px;
transition: width 3s, height 2s;
}
div:hover {
width:600px;
height:100px;
}
</style>
<div>
<p>Question 1:What does HTML stand for?</p>
<p>Answer: HyperText Markup Language</p>
<p>Question 2: What is the average sleep time of a teenager?</p>
<p>Answer: 8-10 hours</p>
</div>
</body>
</html>
https://jcaldwell.neocities.org/CSS%20Documents/FlashCards.html
Sorry for keeping you waiting. This is the website I am working on. I need to the animation or transaction to go on the paragraphs with the answer and questions, that way when they flip it over for the answer, they get it. Again, I need to know how to get the animation on the list, so they can flip it over for the answer. Is there a way for the question to be on one side, and the answer on the other? As you can see, it’s not exactly working. If it can be something like the website Quizlet, then that would be nice. I do not know JavaScript, just a bit of CSS, and some HTML
@keyframes
timeIt {
from {
transform:rotate(0deg);
left:10px;
}
to {
transform:rotate(360deg);
left:500px;
}
}
div {
animation-name:timeIt;
animation-duration:2s;
animation-delay:2s;
animation-timing-function:ease-in;
}
p {
color:blue;
font-weight:normal;
}
ul {
background-color:inherit;
font-weight:bold;
}
li {
color:red;
font-weight:inherit;
}
https://jcaldwell.neocities.org/CSS%20Documents/flashcard.css
This is my css style sheet. Is there anything wrong in there?
Hi,
Perhaps its better if I show you haw to flip a card and then you can insert that code into your design.
Assuming that this is the type of thing you were talking about as your example was just rotating in one axis rather than flipping to the back of a card. It’s quite complicated and not something I can explain quickly but try and play around with it and get used to how it works.
There are plenty of other examples around the web of CSS card flips but all will use similar techniques but some are extremely complex.
I would also suggest that you run your HTML through the validator, as you have a few errors there:
Unless your teacher has specifically told you to use inline styles for some reason, those should also be moved to your CSS stylesheet. You can then check you have done that correctly with the CSS validator:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.