Currently am creating my first website.
I have added two custom animations within my tailwind.config.css, but only am able to use one of them.
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
animation: {
text: 'text 5s ease infinite',
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
}
},
keyframes: {
text: {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
}
},
}
}
}
}
Here is my tailwind.config.css
I am able to use the animate-text, but not animate-wiggle.
Thanks,
The way you define the animations and keyframes isn't valid JSON, instead of
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
animation: {
text: 'text 5s ease infinite',
},
you should write it as
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
text: 'text 5s ease infinite',
},
The same holds for the keyframes section.
Related
How to do custom animate by blur in tailwind
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
keyframes: {
blur: {
'0%': {filter: blur(2px)} ,
'100%': {filter: blur(3px)},
},
},
animation: {
'blur': 'blur 2s linear ',
},
},
},
plugins: [],
}
That not work for me .
I want to make animation to my pop-up window with blur
You must wrap your blur(0px) parameter with parenthesis ("blur(0px)").
You can take a look at the examples provided on the documentation page.
In tailwind, the keyframe's key needs to get a string as its value:
HTML:
<div class="bg-red-500 animate-blur"> ~ Blurry text ~ <div>
Config:
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
blur: {
'0%': { filter: "blur(0px)" },
'100%': { filter: "blur(5px)" },
}
},
animation: {
blur: 'blur 2s linear infinite',
}
},
},
plugins: [],
}
Tailwind-play
I wanted to create an animation for my website. I use tailwind.css for styling.
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
colors: {
primary: "#E51114",
secondary: "#434242",
lightGray: "#CCCCCC",
dimmedWhite: "#F5F5F5",
white: "#FFFFFF",
},
extend: {
keyframes: {
slideInOut: {
"0%": { transform: "translateX(calc(100% + 30px)" },
"10%": { transform: "translateX(0)" },
"90%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(100% + 30px)" },
},
},
// START
animation: {
slideInOut: "slideInOut 5s ease-in-out",
},
// END
},
},
plugins: [],
};
Whenever I extend theme in tailwind.config.cjs by adding "animation" property the problem occurs. If I delete just these 3 lines everything behaves normal.
The output I get (the problem):
You are missing closing parentheses in your keyframes values, so when you add in the animation configuration, it also adds the #keyframes definition and breaks the rest of the CSS. Try the following modification:
slideInOut: {
"0%": { transform: "translateX(calc(100% + 30px))" },
"10%": { transform: "translateX(0)" },
"90%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(100% + 30px))" },
},
I get an error Unknown word CssSyntaxError for the following line:
animation: ${props => (css${DeterminateFill(props)} 1s ease-in forwards)};
It is within the following styled component
const DeterminateLinearProgressDiv = styled(ProgressDiv)`
animation: ${props => (css`${DeterminateFill(props)} 1s ease-in forwards`)};
`
The DeterminateFill is as follows:
const DeterminateFill = (props) => {
const valuePercent = `${props.value}%`
const startPercent = `${props.start}%`
return keyframes`
0% {left: 0%; width: ${startPercent};}
100% {left: 0%; width: ${valuePercent};}
`
}
The code works fine based on my expectation and started to use stylelint today.
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
and stylelint.config.js set as
module.exports = {
processors: ['stylelint-processor-styled-components'],
extends: [
'stylelint-config-recommended',
'stylelint-config-styled-components',
]
}
The solution:
animation: ${props => (css`${DeterminateFill(props)}`)} 1s ease-in forwards;
move the 1s ease-in forwards
I have an element which should render when the page is loaded:
{this.state.pageLoaded && <MyComponent className={classes.container} /> }
When this component is rendered I would like for it to fade in. So I am trying to apply some jss, but can't get it quite work.
This is my JSS:
const styles = theme => ({
'#keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Firefox < 16 */
'#-moz-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Safari, Chrome and Opera > 12.1 */
'#-webkit-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Internet Explorer */
'#-ms-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/* Opera < 12.1 */
'#-o-keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
container: {
//How do I insert like -webkit-animation in here????
animation: '$fadein',
},
});
I do not know if my syntax is correct as I am confused with how to apply things with special character like #keyframes, --webkit-animation, etc... so that different browsers will work.
When I run the page no animations happen and I get the following warninings in my console:
Warning: [JSS] Unknown rule #-moz-keyframes fadein
Warning: [JSS] Unknown rule #-webkit-keyframes fadein
Warning: [JSS] Unknown rule #-ms-keyframes fadein
Warning: [JSS] Unknown rule #-o-keyframes fadein
To achieve this in JSS, you need to declare a key-frames property to your styles object like so;
export default ({
'#keyframes ring': {
from: {
transform: 'rotate(0deg)',
},
to: {
transform: 'rotate(360deg)',
},
},
someClassName: {
animationDelay: '-0.2s',
animationDuration: '1s',
animationIterationCount: 'infinite',
animationName: '$ring', <-- HERE IS HOW YOU REFERENCE TO IT
animationTimingFunction: 'cubic-bezier(0.5, 0, 0.5, 1)',
},
});
You can apply this effect with some css.
.fade-in {
animation: fade-in 2s;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Just add fade-in className to your component and add this code to your css file.
Since you do not want to use css. You may save some time by adding something like http://react-animations.herokuapp.com/ or https://digital-flowers.github.io/react-animated-css.html to your app.
By following the documentation you can add animations to your react project.
I would go this route if you are unwilling to add css or sass to the project.
I am using Angular2. I have a list
<ul>
<li *ngFor="let show of (ann)">
{{show}}
</li>
</ul>
I would like to display one li at a time in every 3 second. Moreover, it will be infinite loop.
Here is my array:
ann: Array<any> = [
{
name: "ABC"
},
{
name: "DEF"
},
{
name: "ZZZ"
}
];
First 3 second: display ABC
next 3 second: display DEF and ABC will be disappeared
next 3 second: display ZZZ and DEF will be disappeared
next 3 second: display ABC since it is end of the array. It will be
infinite loop.
How can I do with CSS?
We could achieve with animations in angular 2
Check preview https://plnkr.co/edit/fNZLspjrendI5SdK5gBC?p=preview
app.component.ts
#Component({
selector: 'my-app',
animations: [
trigger('displayName', [
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
state('out', style({ opacity: 0, display: "none", transform: 'translateY(100%)' })),
transition('in => out', [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('0.3s', style({ transform: 'translateY(100%)', opacity: 0 }))
]),
transition('out => in', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('0.3s 200ms', style({ transform: 'translateY(0)', opacity: 1 }))
])
])
]
})
export class App {
name:string;
currentIndex: number;
students: [] = [
{
name: "Alan",
animationState: 'in'
},
{
name: "Jake",
animationState: 'out'
},
{
name: "Harry",
animationState: 'out'
},
{
name: "Susan",
animationState: 'out'
},
{
name: "Sarah",
animationState: 'out'
},
{
name: "Esther",
animationState: 'out'
}
];
constructor() {
this.name = 'Angular2';
this.currentIndex = 0;
}
ngOnInit() {
setInterval((function(){
console.log(this.currentIndex);
this.students[this.currentIndex].animationState = 'out';
this.currentIndex++;
if(this.currentIndex >= this.students.length) {
this.currentIndex = 0;
}
this.students[this.currentIndex].animationState = 'in';
}).bind(this), 3000);
}
}
html
<div>
<h2>Hello {{name}}</h2>
</div>
<div *ngFor="let student of students" [#displayName]="student.animationState">
{{student.name}}
</div>
You can use Rxjs to acheive this
in template
<div>
<h2>Hello {{name}}</h2>
</div>
<div *ngFor="let student of $students | async">
{{student.name}}
</div>
and in component
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
constructor() {
this.name = 'Angular2'
var timer = 0;
this.$students = Observable.from([[], ...this.students])
.mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
.scan((acc, curr, seed) => {
acc.push(curr);
return acc;
});
}
https://plnkr.co/edit/MgJkFskZRp39FubSUbmH?p=preview
If I'm understanding you better, you're looking for something more like this:
li {
opacity: 0;
animation: display 10s infinite;
}
li:nth-child(1) {
animation-delay: 1s;
}
li:nth-child(2) {
animation-delay: 3s;
}
li:nth-child(3) {
animation-delay: 5s;
}
li:nth-child(4) {
animation-delay: 7s;
}
li:nth-child(5) {
animation-delay: 9s;
}
#keyframes display {
0% { opacity: 1 }
20% { opacity: 0 }
}
<ul class="num-1">
<li>Jake</li>
<li>Esther</li>
<li>John</li>
<li>Ann</li>
<li>Someone</li>
</ul>
Or this:
li {
opacity: 0;
animation: display 10s infinite;
}
li:nth-child(1) {
animation-delay: 1s;
}
li:nth-child(2) {
animation-delay: 3s;
}
li:nth-child(3) {
animation-delay: 5s;
}
li:nth-child(4) {
animation-delay: 7s;
}
li:nth-child(5) {
animation-delay: 9s;
}
#keyframes display {
20% { opacity: 1 }
30% { opacity: 0 }
}
<ul class="num-1">
<li>Jake</li>
<li>Esther</li>
<li>John</li>
<li>Ann</li>
<li>Someone</li>
</ul>