When the screen width is less than 640px, the background is covered, why is the height not covered? And, It's work in Chrome and Edge.
.change{
background: #f00;
height: 100px;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
jsfiddle
Looking at how the site behaves on Chrome, Firefox, and Safari, it seems that Chrome might be the only browser who deviate by attempting to reanimate the <div> after #media conditions are changed. Firefox and Safari thought that the animation is finished and no longer needed to reanimated.
As a workaround, you can force all web browsers to reanimate this by re-setting the .change animation properties under the #media scope and changing their values by a bit, such as by animating for 1.000001 seconds instead of 1.
.change{
background: #f00;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100px;
display: flex;
justify-content: center;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
color: #00f;
animation: test1 1.000001s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
<body>
<div class="change">Some content</div>
</body>
</html>
Related
How can I get this animation effect? I mean exacly this one:
I have to animate the image (I have every part of it in layers). What I should use? which way is the best?
i hope this can help,i use animation on load event using jQuery.
$( window ).on( "load", function() {
$('.main-section').toggleClass('animation-effect');
});
body {
margin: 0;
}
.main-section {
padding: 25px 0px 0 20px;
background-color: #d7f0f7;
}
.main-section .content {
max-width: 450px;
background-color: #d7f0f7;
transform: translateX(-500px);
transition: 0.8s;
}
.main-section .content .box {
height: 150px;
background-color: #e91e63;
margin-top: -15px;
transition: 0.5s;
width: 0;
}
.main-section .content .leaf {
padding-left: 100px;
}
.main-section .content .half-circle {
padding-left: 100px;
margin-top: -20px;
}
.main-section .content .half-circle-2 {
padding-left: 100px;
margin-top: -25px;
transform: rotate(-14deg);
}
.main-section .content .leaf img {
padding-left: 115px;
}
.main-section.animation-effect .content{
transform: translateX(0px);
transition: 1s;
}
.main-section.animation-effect .box {
width: 100%;
transition: 1s;
}
.main-section .content .half-circle img {
animation: rotate 3.5s infinite;
}
.main-section .content .leaf img {
animation: leaf-animation 3s infinite;
}
#keyframes rotate {
0% {
transform: rotate(-14deg);
}
50% {
transform: rotate(10deg);
}
100%
{
transform: rotate(-14deg);
}
}
#keyframes leaf-animation {
0% {
transform: rotate(0);
}
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="main-section">
<div class="content">
<div class="leaf">
<img src="https://i.ibb.co/fSQXHD5/leaf.png" alt="leaf" border="0">
</div>
<div class="half-circle">
<img src="https://i.ibb.co/xfmy6zS/half-1.png" alt="half-1" border="0">
</div>
<div class="half-circle-2">
<img src="https://i.ibb.co/CBdVwNC/half-2.png" alt="half-2" border="0">
</div>
<div class="box">
</div>
</div>
</div>
I have the cropWidth, cropHeight and the start co-ordinates of the image from which I need to crop.
How should I crop an <amp-img> using these information ?
For example, if the dimensions of the image is 10 X 10, and suppose cropwidth is 2 and cropheight is 3 and the start location is 3,5. This means I want the part of the image described by the rectangle with (3,5) as the top-left point and (5,8) as the top-right point.
The following is what I have tried and it is not working properly:
HTML code
<div style="width:400px;height:200px;position: relative;">
<amp-img class="cropped2" width="2px" height="1px" layout="responsive" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
CSS code:
.cropped2 {
width: 100px; /* width of container */
height: 100px; /* height of container */
object-fit: cover;
object-position: 20% 10px;
border: 5px solid black;
}
Can someone tell why this is not working and give a working solution for the same?
Next time, try inserting the working code so that it can be run. Look at my example.
Like your code: I'm not sure if the option with layout= "responsive" and object-fit: cover is a good idea. Look at my example, I hope it will help you.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
.wrapper {
margin: 15px;
position: relative;
}
.wrapper_one {
height: 100px;
width: 100px;
}
.wrapper_two {
height: 150px;
width: 300px;
}
.cropped2 img {
object-position: 20% 10px;
border: 5px solid black;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<div class="wrapper wrapper_one">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
<div class="wrapper wrapper_two">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
</body>
</html>
Codepen: https://codepen.io/alexandr-kazakov/pen/ZEQxqKE
Also check out the examples on the official website:
https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/?format=websites
I'm trying to make a custom follower alert for Twitch TV. And I'm trying to centre a small image inside a div. So far I've managed to centre it horizontaly but no matter what I try it will not centre vertically. I'm not sure why, i've tried reading many other questions on stackoverflow already, as well as following a guide from W3schools but I think this is more of a specific problem to my code. Here is a fiddle. (You can't see the image but you can see where the image would be)
And here is the code; with the idea being that the image is centered both horizontally and vertically inside the small blue square, which i've named 'left-square-container'. However currently the image is horizontally centered at the top of the div only.
If anyone can help I'd appreciate it.
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
6% {
transform: translateY(0);
}
98% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
#keyframes slideInFromTheLeft {
0% {
opacity: 1;
transform: translateX(-100%);
}
4.4% {
opacity: 1;
transform: translateX(0);
}
97% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft-Text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
overflow: hidden;
/*hide elements when they overflow*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 100px;
height: 100px;
background: #0d47a1;
position: relative;
display: inline-block;
float: left;
z-index: 1;
transform: translateX(-100%);
animation: 9.6s 1 slideInFromAbove;
/* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/
{
display: block;
margin: 0 auto;
webkit-filter: drop-shadow(1px 1px 1px #212121);
filter: drop-shadow(1px 1px 1px #212121);
}
.right-retangle-container {
width: 400px;
height: 100px;
opacity: 0;
background: #292929;
border-top: 5px solid #0d47a1;
box-sizing: border-box;
display: inline-block;
float: left;
position: relative;
/* needed for z-index*/
z-index: 0;
/*place under left square*/
transform: translateX(-100%);
animation: 8.8s .6s 1 slideInFromTheLeft;
/* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.text {
font-size: 30px;
color: #ffffff;
overflow: hidden;
text-align: center;
/*vertical alignment of text*/
position: relative;
/*horizontal alignment of text*/
top: 50%;
/*horizontal alignment of text*/
transform: translateY(-50%);
/*horizontal alignment of text*/
}
.text-animation {
transform: translateY(100%);
animation: .5s 1s 1 slideInFromBelow;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
margin-left: 20px;
margin-right: 20px;
}
.keyword:not(.user_message) {
color: #f57f17;
}
<div class="follower-container">
<div class="left-square-container">
<div class="icon">
<img class="image" src="{image}" />
</div>
</div>
<div class="right-retangle-container">
<div class="text">
<div class="text-animation">
New Follower <span class='keyword name'>{name}</span></div>
</div>
</div>
</div>
There are several ways to do this, but since you're already using flexbox, I would recommend continuing with that path.
On your .left-square-container div, simply change display to display:flex and then set align-items: center; and justify-content: center;.
Seems to work for me.
Fiddle
If you know the height of the container, you can set the line-height of said container to the value of its height.
I updated your CSS to look like so:
.icon {
text-align: center;
heignt: 100px;
line-height: 100px;
}
The "icon" div does not have any specified height. It is declared block. Hence, you cannot expect to align an image inside this div vertically as the scope of the div height-wise on the screen will be only of the size of the image.
Even in the in css of "icon", you have said margin:0 auto; -> The command will align the image in center not vertically but only horizontally. For what you want to happen, that 0 should be auto and then there should be some height of the div to see it align in the center vertically as well.
Inspired by native Android zoomOut for form transitions and iOS app launching zoom effect, which are both really cool...
How do I go about implementing zoom In or Out transition for Forms, Dialogs and Containers in Codenameone?
I want the transition to have zooming animation like below:
#charset "UTF-8";
*,
:before,
:after {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,
select,
button,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
color: inherit;
}
.butt,
.input {
padding: .75rem;
margin: .375rem;
background-color: transparent;
border-radius: 4px;
}
.butt:focus,
.input:focus {
outline: none;
}
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
.butt--primary {
background-color: #f35626;
color: #fff;
}
.input {
border: 1px solid #c0c8c9;
border-radius: 4px;
}
.input--dropdown {
background-image: url("images/ddown.png");
background-image: url("images/ddown.svg?3"), none;
background-repeat: no-repeat;
background-size: 1.5rem 1rem;
background-position: right center;
}
h1,
.alpha {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
h2,
.beta {
margin-bottom: .75rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
}
#media (min-width: 650px) {
.mega {
font-size: 6rem;
line-height: 1;
}
}
.subhead,
.meta {
color: #7b8993;
}
.promo {
text-align: center;
}
p,
hr,
form {
margin-bottom: 1.5rem;
}
hr {
border: none;
margin-top: -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
color: inherit;
text-decoration: underline;
-webkit-animation: hue 60s infinite linear;
}
a:hover {
color: #f35626;
}
.wrap {
max-width: 38rem;
margin: 0 auto;
}
.island {
padding: 1.5rem;
}
.isle {
padding: .75rem;
}
.spit {
padding: .375rem;
}
html {
font: 100%/1.5"Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
#media (min-width: 650px) {
html {
height: 100%;
}
html:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body {
display: inline-block;
vertical-align: middle;
max-width: 38rem;
}
}
.site__header {
-webkit-animation: bounceInUp 1s;
}
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
.site__content {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.site__content form {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//code.jquery.com" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="site__header island">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Zoom me in and out</h1></span>
</div>
</header>
<!-- /.site__header -->
<main class="site__content island" role="content">
<div class="wrap">
<form>
<select class="input input--dropdown js--animations">
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
</optgroup>
</select>
<button class="butt js--triggerAnimation">Animate it</button>
</form>
<hr />
</div>
</main>
<!-- /.site__content -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
};
$(document).ready(function() {
$('.js--triggerAnimation').click(function(e) {
e.preventDefault();
var anim = $('.js--animations').val();
testAnim(anim);
});
$('.js--animations').change(function() {
var anim = $(this).val();
testAnim(anim);
});
});
</script>
</body>
</html>
Probably the closest thing to some of the Android effects is the Morph transition between forms that allows a component to grow into the next form http://www.codenameone.com/blog/mighty-morphing-components.html
If you want something closer to the above code you can just position the component in the right location and make it smaller then use animateLayout() to make it grow into place.
In the old days we had a FlyIn transition which mapped to this exactly but it used old 3D code. I think it should be trivial to implement though with the affine transform and scale similarly to the FlipTransition.
http://dev.viral-minds.com/miller/abc/abc.html
two questions about this
How do I keep the green block from "blinking" at the beginning when the page loads?
The animation only works on chrome at the moment...how to get it to work in FF and IE?
thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
<style type="text/css">
body
{
background-color:#FFFFF0; /*ivory*/
overflow: hidden;
}
#box
{
position: absolute;
width:495px;
height:263px;
background:#32331d;
top: 20px;
left: 20px;
}
#nav
{
position: absolute;
margin-left:30px;
width:100%;
height:100px;
top: 425px;
z-index: 100;
background-image:url('colors.png');
background-repeat:no-repeat;
}
#stars,
#stars-2,
#small-stars,
#small-stars-2 {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin: -300px 0 0 -300px;
background: url(stars-large.png) no-repeat center center;
-webkit-animation-name: starsLarge;
-webkit-animation-duration: 240s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLarge {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#stars-2 {
-webkit-animation-name: starsLargeAlt;
-webkit-animation-duration: 180s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLargeAlt {
from {
-webkit-transform: rotate(180deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#small-stars,
#small-stars-2 {
background: url(stars-small.png) no-repeat center center;
-webkit-animation-duration: 60s;
-webkit-animation-name: starsSmall;
}
#small-stars-2 {
-webkit-animation-name: starsSmallAlt;
-webkit-animation-duration: 120s;
}
#-webkit-keyframes starsSmall {
from {
-webkit-transform: rotate(360deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(0deg) scale(.5);
opacity: .5;
}
}
#-webkit-keyframes starsSmallAlt {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
</style>
</head>
<body>
<div id="box"><img src="actual.png"></img></div>
<div id="nav"></div>
<div id="stars"></div>
<div id="stars-2"></div>
<div id="small-stars"></div>
<div id="small-stars-2"></div>
</body>
Item 1: The green block flickers because the overlayed image is not retrieved from the server yet. You could add display: none; to the CSS for #box, then programmatically display it after the page has been fully loaded. For example:
// jQuery:
$(document).ready(function(){
$('#box').show();
});
Item 2: The animation only works in Chrome because you are using -webkit specific style definitions. You will need to research alternatives, such as -moz and -ms in order to see if it can work in those browsers. You could also try omitting the prefix altogether.
I. You can change the background color of that div to match the page background. And later, when the image has been loaded, you change it to dark green via jQuery:
$(function() {
$('#box img').load(function() {
$(this).parent().css('background-color', '#32331D');
});
});
II. You have to add browser specific prefixes other than -webkit.
For FF - -moz
For IE - -ms
For Opera - -o
Just keep in mind that those animations won't work in older versions of IE (8 and under) despite the prefixes. Those suckers don't support CSS animations.